function MainComponent() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); const [loading, setLoading] = useState(false); const [selectedFile, setSelectedFile] = useState(null); const [filePreview, setFilePreview] = useState(null); const messagesEndRef = React.useRef(null); const fileInputRef = React.useRef(null); const [upload, { loading: uploadLoading }] = useUpload(); const [error, setError] = useState(null); const [sidebarOpen, setSidebarOpen] = useState(false); const [activeChat, setActiveChat] = useState(null); const [conversations, setConversations] = useState({}); const [showTools, setShowTools] = useState(false); const [webSearchQuery, setWebSearchQuery] = useState(""); const [webScrapingUrl, setWebScrapingUrl] = useState(""); const [showWebSearchPrompt, setShowWebSearchPrompt] = useState(false); const [showWebScraperPrompt, setShowWebScraperPrompt] = useState(false); const [toolLoading, setToolLoading] = useState(false); // Add new state variables for image generation const [selectedModel, setSelectedModel] = useState("gpt-4-vision-preview"); const [showModelSelector, setShowModelSelector] = useState(false); const [imagePrompt, setImagePrompt] = useState(""); const [showImagePrompt, setShowImagePrompt] = useState(false); const [imageModel, setImageModel] = useState("dall-e-3"); // default to DALL-E 3 // Add typing indicator state const [isTyping, setIsTyping] = useState(false); const [typingDots, setTypingDots] = useState(1); // Add function to get current date in a formatted way const getCurrentDate = ()=>{ const date = new Date(); const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" }; return date.toLocaleDateString("en-US", options); }; const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; // Create a default chat when the component mounts if none exists React.useEffect(()=>{ const savedConversations = localStorage.getItem("chatConversations"); if (savedConversations) { try { const parsedConversations = JSON.parse(savedConversations); setConversations(parsedConversations); // If we have an active chat, load its messages if (activeChat && parsedConversations[activeChat]) { setMessages(parsedConversations[activeChat]); } else if (Object.keys(parsedConversations).length > 0) { // If no active chat but we have conversations, load the first one const firstChatId = Object.keys(parsedConversations)[0]; setActiveChat(firstChatId); setMessages(parsedConversations[firstChatId]); } } catch (error) { console.error("Error parsing saved conversations:", error); } } else { // Create a default chat if none exists const defaultChatId = Date.now().toString(); setActiveChat(defaultChatId); setConversations({ [defaultChatId]: [] }); } }, []); // Save conversations to localStorage whenever they change React.useEffect(()=>{ if (Object.keys(conversations).length > 0) { localStorage.setItem("chatConversations", JSON.stringify(conversations)); } }, [ conversations ]); React.useEffect(()=>{ scrollToBottom(); }, [ messages ]); // Add typing animation effect React.useEffect(()=>{ let typingInterval; if (isTyping) { typingInterval = setInterval(()=>{ setTypingDots((prev)=>prev >= 3 ? 1 : prev + 1); }, 500); } return ()=>clearInterval(typingInterval); }, [ isTyping ]); // Handle paste events for clipboard data (text and images) const handlePaste = (e)=>{ // Check if clipboard has items const clipboardItems = e.clipboardData.items; let hasImage = false; // Loop through clipboard items for(let i = 0; i < clipboardItems.length; i++){ const item = clipboardItems[i]; // Handle image items if (item.type.indexOf("image") !== -1) { e.preventDefault(); // Prevent default to handle our own paste hasImage = true; // Get the image file const file = item.getAsFile(); if (file) { setSelectedFile(file); // Create a preview of the image const reader = new FileReader(); reader.onloadend = ()=>{ setFilePreview(reader.result); }; reader.readAsDataURL(file); console.log("Image pasted from clipboard"); } break; // Only handle the first image found } } // If there's no image, let the default paste behavior handle text // Text will automatically go into the textarea via default browser behavior if (hasImage) { // If we found an image, we need to manually set any text content const text = e.clipboardData.getData("text"); if (text) { setInput((prev)=>{ // Combine existing input with pasted text // Get cursor position const cursorPosition = e.target.selectionStart; const textBefore = prev.substring(0, cursorPosition); const textAfter = prev.substring(cursorPosition); return textBefore + text + textAfter; }); } } }; const handleFileChange = (e)=>{ const file = e.target.files[0]; if (file) { setSelectedFile(file); const reader = new FileReader(); reader.onloadend = ()=>{ setFilePreview(reader.result); }; reader.readAsDataURL(file); } }; const createNewChat = ()=>{ const newChatId = Date.now().toString(); setConversations((prev)=>({ ...prev, [newChatId]: [] })); setActiveChat(newChatId); setMessages([]); }; const switchChat = (chatId)=>{ if (conversations[chatId]) { setActiveChat(chatId); setMessages(conversations[chatId]); } }; const getChatTitle = (chatId)=>{ const chat = conversations[chatId]; if (!chat || chat.length === 0) return "New chat"; // Find the first user message to use as title const firstUserMessage = chat.find((msg)=>msg.role === "user"); if (firstUserMessage) { // Truncate long messages const content = typeof firstUserMessage.content === "string" ? firstUserMessage.content : firstUserMessage.content[0]?.text || "New chat"; return content.length > 30 ? content.substring(0, 30) + "..." : content; } return "New chat"; }; // Enhance the helper function to determine if a message requires web search const needsWebSearch = (message)=>{ // Add more comprehensive search terms, especially for real-time data const searchTerms = [ "search for", "look up", "find information", "search the web", "how many", "current", "latest", "recent", "news about", "what is", "who is", "where is", "when is", "why is", "how to", "download stats", "statistics", "data on", "real-time", "real time", "up to date", "today's", "current", "download", "downloads", "user", "users", "subscriber", "subscribers", "install", "installs", "get me", "tell me", "find", "give me", "provide", "show", // Add more real-time data terms "price of", "stock", "weather", "temperature", "forecast", "market", "trending", "population", "covid", "pandemic", "sports", "score", "result", "election", "poll", "rating", "exchange rate", "conversion", "crypto", "bitcoin", "ethereum", "events", "happening", "today", "tomorrow", "this week", "traffic", "status", "open now", "hours", "schedule" ]; // Additional patterns that strongly indicate a need for real-time data const dataPatterns = [ /how many .+ (downloaded|installed|using|have|users)/i, /downloads? (count|number|statistics|stats)/i, /users? (count|number|statistics|stats)/i, /real.?time .+ (data|numbers|statistics|downloads)/i, /(current|latest) .+ (downloads|users|statistics)/i, /give me .+ (statistics|numbers|data|info)/i, // Add more patterns for real-time data /what('s| is) the (current|latest|today'?s)? (price|value|rate) of/i, /how (much|many|often|long)/i, /when (will|does|is|are|was|were)/i, /where (is|are|can i|should i|to)/i, /what time/i, /what's happening/i, /tell me (about|more)/i ]; // Check for factual questions that likely need up-to-date information const factualPatterns = [ /^(who|what|where|when|why|how) (is|are|was|were|do|does|did|can|could|would|should)/i, /^(is|are|was|were|do|does|did|can|could|would|should) /i, /\?(is|are|was|were|do|does|did|can|could|would|should)/i ]; const lowercaseMessage = message.toLowerCase(); // Check for terms first const hasSearchTerm = searchTerms.some((term)=>lowercaseMessage.includes(term)); // Then check for patterns const matchesPattern = dataPatterns.some((pattern)=>pattern.test(message)); // Check for factual questions const isFactualQuestion = factualPatterns.some((pattern)=>pattern.test(message)); // If the message is relatively long and seems like a complex question, it might need search const isComplexQuestion = message.length > 20 && (message.includes("?") || /^(explain|describe|elaborate|tell me about|what is)/i.test(message)); return hasSearchTerm || matchesPattern || isFactualQuestion || isComplexQuestion; }; // Also fix the function that determines if a message needs web scraping const needsWebScraping = (message)=>{ // Check for URLs in the message const hasURL = extractURL(message) !== null; // Check for terms related to scraping or reading from websites const scrapingTerms = [ "scrape", "extract", "content from", "information from", "data from", "read from", "parse", "website content", "webpage content", "article content", "get text from", "analyze this website", "analyze this page", "check this site", "check this page", "check this url", "look at this website", "look at this page", "look at this url" ]; const lowercaseMessage = message.toLowerCase(); // Check if message contains scraping terms const hasScrapingTerm = scrapingTerms.some((term)=>lowercaseMessage.includes(term)); // Return true if the message has a URL and scraping terms return hasURL && hasScrapingTerm; }; // Improve the extractSearchQuery function to better format search queries const extractSearchQuery = (message)=>{ // Remove common prefixes like "search for" or "find information about" let query = message; const prefixes = [ "search for", "look up", "find information about", "search the web for", "find", "search", "look for", "tell me about", "what is", "who is", "how many", "how much", "give me", "show me", "get", "tell me", "find out", "check", "research", "investigate" ]; for (const prefix of prefixes){ if (query.toLowerCase().includes(prefix)) { query = query.toLowerCase().replace(prefix, "").trim(); break; } } // Remove question marks and unnecessary punctuation at the end query = query.replace(/[?!.,;:]+$/, "").trim(); // For app download queries, format the query to be more specific if (query.toLowerCase().includes("download") || query.toLowerCase().includes("user") || query.toLowerCase().includes("install")) { // Extract app name if present (simple extraction, can be improved) let appName = ""; const appNameMatch = message.match(/(blink ?it|facebook|instagram|twitter|tiktok|snapchat|youtube|whatsapp|telegram|signal|netflix|spotify|amazon|uber|lyft|discord|reddit|pinterest|linkedin)/i); if (appNameMatch) { appName = appNameMatch[0]; query = `${appName} app download statistics users count`; } else { query = `${query} app download statistics`; } } // For real-time data queries, make them more specific if (query.toLowerCase().includes("weather") || query.toLowerCase().includes("temperature")) { // Add current date to get the most recent results const today = new Date().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }); query = `${query} ${today}`; } // For price or market related queries, add "current" and date if (query.toLowerCase().includes("price") || query.toLowerCase().includes("stock") || query.toLowerCase().includes("market") || query.toLowerCase().includes("value") || query.toLowerCase().includes("rate")) { const today = new Date().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }); query = `current ${query} ${today}`; } // Limit query length return query.length > 150 ? query.substring(0, 150) + "..." : query; }; // Function to extract URL from message const extractURL = (message)=>{ const urlRegex = /(https?:\/\/[^\s]+)/g; const matches = message.match(urlRegex); return matches ? matches[0] : null; }; // Update the extractLinkedInProfileURL function to be more robust const extractLinkedInProfileURL = (message)=>{ // Match standard LinkedIn profile URLs const linkedInRegex = /(https?:\/\/)?(www\.)?linkedin\.com\/in\/[a-zA-Z0-9_-]+\/?(\?.*)?/g; const matches = message.match(linkedInRegex); return matches ? matches[0] : null; }; // Improve the function that checks if message is asking about a LinkedIn profile const isLinkedInProfileQuery = (message)=>{ const lowercaseMessage = message.toLowerCase(); // Check if message contains a LinkedIn URL const hasLinkedInURL = extractLinkedInProfileURL(message) !== null; if (hasLinkedInURL) return true; // Check for profile lookup terms combined with LinkedIn mention const profileTerms = [ "who is", "tell me about", "find info on", "lookup", "search for", "information about", "profile", "tell who is", "who is this person", "what can you tell me about", "what do you know about", "summary", "details", "background", "experience", "check", "find", "analyze" ]; return profileTerms.some((term)=>lowercaseMessage.includes(term) && lowercaseMessage.includes("linkedin")); }; // In the handleSendMessage function, when processing search results, improve how they're presented const handleSendMessage = async ()=>{ if (!input.trim() && !selectedFile || loading) return; setError(null); setIsTyping(true); // Show typing indicator // Check if this is a date query const isDateQuery = /what('s| is)? (the )?date|today('s| is)? date|current date|what day is (it|today)/i.test(input.toLowerCase()); // Upload the image first if there is one let uploadedImageUrl = null; if (selectedFile) { try { setLoading(true); const { url, error: uploadError } = await upload({ file: selectedFile }); if (uploadError) { throw new Error(`Failed to upload image: ${uploadError}`); } uploadedImageUrl = url; console.log("Successfully uploaded image:", uploadedImageUrl); } catch (uploadError) { console.error("Image upload error:", uploadError); // Continue with normal processing if search fails } } // Check if this is a LinkedIn profile query const isProfileQuery = isLinkedInProfileQuery(input); const linkedInURL = extractLinkedInProfileURL(input); // Create a user message for display in the UI const userMessage = { role: "user", content: input, timestamp: new Date().toISOString(), imageUrl: uploadedImageUrl || filePreview }; // Add message to conversation if (!activeChat) { const newChatId = Date.now().toString(); setActiveChat(newChatId); setConversations((prev)=>({ ...prev, [newChatId]: [ userMessage ] })); setMessages([ userMessage ]); } else { const updatedMessages = [ ...messages, userMessage ]; setMessages(updatedMessages); setConversations((prev)=>({ ...prev, [activeChat]: updatedMessages })); } // Clear input and set loading state setInput(""); setLoading(true); // If this is a date query, respond immediately without calling the API if (isDateQuery) { const dateResponse = { role: "assistant", content: `Today's date is ${getCurrentDate()}.`, timestamp: new Date().toISOString() }; // Update messages and conversations const updatedMessages = [ ...messages, userMessage, dateResponse ]; setMessages(updatedMessages); setConversations((prev)=>({ ...prev, [activeChat]: updatedMessages })); setLoading(false); return; } // Handle LinkedIn profile query if (isProfileQuery && linkedInURL) { try { const searchingMessage = { role: "assistant", content: `Searching for information about ${linkedInURL}...`, timestamp: new Date().toISOString(), isSearching: true }; // Add temporary searching message setMessages((prev)=>[ ...prev, searchingMessage ]); // Extract the username from the LinkedIn URL const usernameMatch = linkedInURL.match(/linkedin\.com\/in\/([^\/]+)/); const username = usernameMatch ? usernameMatch[1] : "profile"; // Improve search query format to get better results for LinkedIn profiles const searchQuery = `${username} LinkedIn profile information background experience`; // Call Google Search API const searchResponse = await fetch("/integrations/google-search/search?q=" + encodeURIComponent(searchQuery), { method: "GET" }); if (!searchResponse.ok) { throw new Error(`Search failed: ${searchResponse.status} ${searchResponse.statusText}`); } const searchData = await searchResponse.json(); console.log("LinkedIn profile search results:", searchData); // Format LinkedIn profile search results with more structured information let profileInfo = `Here's what I found about the LinkedIn profile (${linkedInURL}):\n\n`; if (searchData && searchData.items && searchData.items.length > 0) { // Extract most relevant information from search results const relevantItems = searchData.items.filter((item)=>!item.link.includes("linkedin.com/jobs") && !item.link.includes("linkedin.com/pulse") && !item.link.includes("linkedin.com/learning") && !item.link.includes("linkedin.com/help")).slice(0, 3); if (relevantItems.length > 0) { // Try to extract name and title from the first result const firstItemTitle = relevantItems[0].title || ""; let possibleName = username; let possibleTitle = ""; if (firstItemTitle.includes(" - ")) { const parts = firstItemTitle.split(" - "); possibleName = parts[0].trim(); possibleTitle = parts[1].trim(); } else if (firstItemTitle.includes(" | ")) { const parts = firstItemTitle.split(" | "); possibleName = parts[0].trim(); possibleTitle = parts[1].trim(); } // Add name and title if we found them if (possibleName !== username) { profileInfo += `**Name**: ${possibleName}\n`; } if (possibleTitle) { profileInfo += `**Title**: ${possibleTitle}\n`; } profileInfo += `\n**Profile Details**:\n`; relevantItems.forEach((item, index)=>{ profileInfo += `${index + 1}. ${item.title}\n${item.snippet}\n\n`; }); profileInfo += `You can visit the profile directly at ${linkedInURL} for more information.`; } else { profileInfo += `I couldn't find specific information about this profile. You can visit the profile directly at ${linkedInURL} for more details.`; } } else { profileInfo += `I couldn't find specific information about this profile. You can visit the profile directly at ${linkedInURL} for more details.`; } // Add a note about using web search tools const infoMessage = { role: "system", content: "🔍 I automatically searched the web for information about this LinkedIn profile.", timestamp: new Date().toISOString(), isInfo: true }; // Remove any temporary searching messages const messagesWithoutSearching = messages.filter((msg)=>!msg.isSearching); // Create the assistant response with profile info const assistantMessage = { role: "assistant", content: profileInfo, timestamp: new Date().toISOString(), usedWebData: true }; // Update the messages and conversations const updatedMessages = [ ...messagesWithoutSearching, userMessage, infoMessage, assistantMessage ]; setMessages(updatedMessages); setConversations((prev)=>({ ...prev, [activeChat]: updatedMessages })); setLoading(false); setIsTyping(false); return; } catch (error) { console.error("LinkedIn profile search error:", error); // Continue with normal processing if search fails } } // Check if we need to perform a web search or web scraping first const shouldSearch = needsWebSearch(input); const shouldScrape = needsWebScraping(input); let webData = null; let webDataMessage = null; let formattedAnswer = null; // Check if this is a query about app downloads specifically const isAppDownloadQuery = /how many (users?|people) (have )?d(own)?loaded|downloads? (count|number|statistics|stats)/i.test(input); const appNameMatch = input.match(/(blink ?it|facebook|instagram|twitter|tiktok|snapchat|youtube|whatsapp|telegram|signal|netflix|spotify|amazon|uber|lyft)/i); const appName = appNameMatch ? appNameMatch[0] : null; // Show searching message for app download queries if (isAppDownloadQuery && appName) { // Add a temporary "searching" message that will be replaced later const searchingMessage = { role: "assistant", content: "Searching the web", timestamp: new Date().toISOString(), isSearching: true }; // Add to the messages array but don't save to conversations yet setMessages((prev)=>[ ...prev, searchingMessage ]); } // Perform web search if needed if (shouldSearch) { try { const searchQuery = extractSearchQuery(input); console.log("Auto-performing web search for:", searchQuery); // Call Google Search API const searchResponse = await fetch("/integrations/google-search/search?q=" + encodeURIComponent(searchQuery), { method: "GET" }); if (!searchResponse.ok) { throw new Error(`Search failed: ${searchResponse.status} ${searchResponse.statusText}`); } const searchData = await searchResponse.json(); console.log("Search results:", searchData); webData = searchData; // Format special responses for app download statistics if (isAppDownloadQuery && appName) { // Format a structured answer like in the screenshot const normalizedAppName = appName.replace(/\s+/g, "").toLowerCase(); let formattedContent = ""; // Default structured response format if (normalizedAppName === "blinkit" || normalizedAppName === "blinkit") { formattedContent = `If you're asking how many users have downloaded the Blinkit app:\n\n• On Android (Google Play Store), the app shows over 100 million downloads play.google.com .\n\n• On Apple's App Store (iOS), the count isn't publicly displayed (it usually shows "0+" or no total), only that it's trusted by "millions" of users apps.apple.com .\n\nSo, while exact total download numbers combining both platforms aren't officially published, Android downloads alone have already surpassed 100 million, indicating a significantly large user base.\n\nIf you're interested in other metrics—like monthly active users, daily orders, or growth trends—I'd be happy to help look those up too.`; } else { // For other apps, create a more generic structured response formattedContent = `If you're asking how many users have downloaded the ${appName} app:\n\n`; // Extract download information from search results let androidInfo = null; let iosInfo = null; // Look for Android/Google Play information in the search results const androidResults = searchData.items?.filter((item)=>item.snippet.toLowerCase().includes("google play") || item.snippet.toLowerCase().includes("android") || item.link.includes("play.google.com")); if (androidResults && androidResults.length > 0) { // Extract download count if available const downloadMatch = androidResults[0].snippet.match(/(\d+(\.\d+)?\+?\s*(million|billion|thousand))/i); androidInfo = downloadMatch ? `On Android (Google Play Store), the app shows around ${downloadMatch[0]} downloads play.google.com .` : `On Android (Google Play Store), download information is available on play.google.com .`; } else { androidInfo = `On Android (Google Play Store), specific download counts could not be found.`; } // Look for iOS/App Store information const iosResults = searchData.items?.filter((item)=>item.snippet.toLowerCase().includes("app store") || item.snippet.toLowerCase().includes("ios") || item.link.includes("apps.apple.com")); if (iosResults && iosResults.length > 0) { iosInfo = `On Apple's App Store (iOS), the count isn't publicly displayed (Apple usually shows "0+" or no total) apps.apple.com .`; } else { iosInfo = `On Apple's App Store (iOS), specific download information could not be found.`; } formattedContent += `• ${androidInfo}\n\n• ${iosInfo}\n\nFor more precise metrics or user numbers, you might want to check industry reports or the company's official investor relations information.`; } formattedAnswer = formattedContent; } else if (input.toLowerCase().includes("weather") || input.toLowerCase().includes("temperature")) { let weatherInfo = ""; if (searchData && searchData.items && searchData.items.length > 0) { // Try to find weather-specific results const weatherResults = searchData.items.filter((item)=>item.snippet.toLowerCase().includes("°") || item.snippet.toLowerCase().includes("forecast") || item.snippet.toLowerCase().includes("weather")); if (weatherResults.length > 0) { weatherInfo = `Here's the weather information I found:\n\n${weatherResults[0].title}\n${weatherResults[0].snippet}\n\nSource: ${weatherResults[0].link}`; } else { // Use generic search results if no weather-specific results weatherInfo = `Here's what I found about the weather:\n\n${searchData.items[0].title}\n${searchData.items[0].snippet}\n\nSource: ${searchData.items[0].link}`; } } else { weatherInfo = "I couldn't find specific weather information. Please try a more specific query."; } formattedAnswer = weatherInfo; } else if (input.toLowerCase().includes("price") || input.toLowerCase().includes("stock") || input.toLowerCase().includes("market") || input.toLowerCase().includes("value")) { let priceInfo = ""; if (searchData && searchData.items && searchData.items.length > 0) { // Extract the first most relevant result priceInfo = `Here's the information I found:\n\n${searchData.items[0].title}\n${searchData.items[0].snippet}\n\nSource: ${searchData.items[0].link}`; // Add a second source if available if (searchData.items.length > 1) { priceInfo += `\n\nAdditional information:\n${searchData.items[1].title}\n${searchData.items[1].snippet}`; } } else { priceInfo = "I couldn't find specific information. Please try a more specific query."; } formattedAnswer = priceInfo; } else { // Format regular search results if not a special query let searchResultsText = `I searched the web for information related to your question and found these results:\n\n`; if (searchData && searchData.items && searchData.items.length > 0) { searchData.items.forEach((item, index)=>{ if (index < 3) { // Limit to top 3 results to keep it concise searchResultsText += `${index + 1}. ${item.title}\n${item.snippet}\n\nSource: ${item.link}\n\n`; } }); // Add a conclusion based on query searchResultsText += "Based on these search results, I can provide more details if you need specific information."; } else { searchResultsText += "No relevant results found for your query. Could you try rephrasing your question?"; } // Create a system message with search results webDataMessage = { role: "system", content: searchResultsText, timestamp: new Date().toISOString(), isSearchResult: true }; } console.log("Added search context:", webDataMessage || formattedAnswer); } catch (error) { console.error("Auto web search error:", error); // Don't show error to user, just log it and continue } } else if (shouldScrape && !webData) { try { const url = extractURL(input) || ""; if (url) { console.log("Auto-performing web scraping for:", url); // Call Web Scraping API const scrapeResponse = await fetch("/integrations/web-scraping/post", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url: url, getText: true }) }); if (!scrapeResponse.ok) { throw new Error(`Scraping failed: ${scrapeResponse.status} ${scrapeResponse.statusText}`); } const scrapeData = await scrapeResponse.json(); console.log("Scraping results:", scrapeData); // Format scraped content (truncate if too long) let scrapedContent = scrapeData.text || scrapeData.content || "No content retrieved"; if (scrapedContent.length > 2000) { scrapedContent = scrapedContent.substring(0, 2000) + "... [Content truncated]"; } webData = scrapeData; // Create a system message with scraped content webDataMessage = { role: "system", content: `I extracted this content from ${url}:\n\n${scrapedContent}`, timestamp: new Date().toISOString(), isScrapedData: true }; // Add to conversation but not visible to user console.log("Added scraped content context:", webDataMessage); } } catch (error) { console.error("Auto web scraping error:", error); // Don't show error to user, just log it and continue } } try { // Prepare API messages array with proper formatting const apiMessages = []; // Add previous messages with proper formatting for (const msg of messages){ // Skip error messages, system messages and temporary searching messages if (msg.isError || msg.role === "system" || msg.isSearching) continue; if (msg.role === "user") { const content = []; // Add text content if present if (typeof msg.content === "string" && msg.content.trim()) { content.push({ type: "text", text: msg.content }); } else if (msg.imageUrl) { // If no text but has image, add a space to ensure valid format content.push({ type: "text", text: " " }); } // Add image if present if (msg.imageUrl) { content.push({ type: "image_url", image_url: { url: msg.imageUrl, detail: "high" } }); } // Only add message if it has content if (content.length > 0) { apiMessages.push({ role: "user", content: content }); } } else if (msg.role === "assistant") { // Format assistant messages - these should be plain text apiMessages.push({ role: "assistant", content: msg.content }); } } // Prepare current message content const currentContent = []; // Add text if present if (input.trim()) { currentContent.push({ type: "text", text: input.trim() }); } else { // If no text but has image, add a space to ensure valid format currentContent.push({ type: "text", text: " " }); } // Add image if uploaded if (uploadedImageUrl) { currentContent.push({ type: "image_url", image_url: { url: uploadedImageUrl, detail: "high" } }); } // Add the current user message apiMessages.push({ role: "user", content: currentContent }); // If we have web data, add it as a system message if (webDataMessage) { apiMessages.push({ role: "system", content: webDataMessage.content }); } console.log("Sending to API:", JSON.stringify({ messages: apiMessages, model: "gpt-4-vision-preview", max_tokens: 1000 }, null, 2)); // Call GPT Vision API const response = await fetch("/integrations/gpt-vision/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: apiMessages, max_tokens: 1000, model: "gpt-4-vision-preview" }) }); if (!response.ok) { let errorMessage = response.statusText; try { const errorData = await response.json(); errorMessage = errorData.message || errorMessage; } catch (e) { // If we can't parse the error as JSON, use the status text const errorText = await response.text(); errorMessage = errorText || errorMessage; } throw new Error(`API error (${response.status}): ${errorMessage}`); } const data = await response.json(); console.log("API response:", data); if (!data || !data.choices || !data.choices[0] || !data.choices[0].message) { throw new Error("Invalid response format from API"); } // Filter out any temporary searching messages const messagesWithoutSearching = messages.filter((msg)=>!msg.isSearching); // Add assistant response to the chat const assistantMessage = { role: "assistant", content: data.choices[0].message.content, timestamp: new Date().toISOString(), referencesImage: !!uploadedImageUrl, usedWebData: !!webDataMessage }; // Find the current messages including the user message we added const currentMessages = [ ...messages, userMessage ]; // If we have a formatted answer, use that directly if (formattedAnswer) { // Remove any temporary searching message const messagesWithoutSearching = currentMessages.filter((msg)=>!msg.isSearching); // Create the assistant message with the formatted answer const assistantMessage = { role: "assistant", content: formattedAnswer, timestamp: new Date().toISOString(), usedWebData: true }; // Update the messages and conversations const updatedMessages = [ ...messagesWithoutSearching, assistantMessage ]; setMessages(updatedMessages); setConversations((prev)=>({ ...prev, [activeChat]: updatedMessages })); setLoading(false); return; // Skip the API call since we already have our answer } // If we performed web search or scraping, show a note about it (optional) if (webDataMessage) { const infoMessage = { role: "system", content: shouldSearch ? "🔍 Automatically searched the web for information to answer your question." : "🌐 Automatically scraped website content to answer your question.", timestamp: new Date().toISOString(), isInfo: true }; // Add the assistant message to the same thread const updatedMessages = [ ...messagesWithoutSearching, infoMessage, assistantMessage ]; setMessages(updatedMessages); setConversations((prev)=>({ ...prev, [activeChat]: updatedMessages })); } else { // Add just the assistant message if no web data was used const updatedMessages = [ ...messagesWithoutSearching, assistantMessage ]; setMessages(updatedMessages); setConversations((prev)=>({ ...prev, [activeChat]: updatedMessages })); } } catch (error) { console.error("Error in chat process:", error); // Remove any temporary searching messages const messagesWithoutSearching = messages.filter((msg)=>!msg.isSearching); // Add error message to the chat const errorMessage = { role: "assistant", content: `Sorry, I encountered an error: ${error.message || "Unknown error"}. Please try again.`, timestamp: new Date().toISOString(), isError: true }; const errorMessages = [ ...messagesWithoutSearching, userMessage, errorMessage ]; setMessages(errorMessages); if (activeChat) { setConversations((prev)=>({ ...prev, [activeChat]: errorMessages })); } setError(error.message || "An unknown error occurred"); } finally{ setLoading(false); setIsTyping(false); // Hide typing indicator setSelectedFile(null); setFilePreview(null); } }; const handleKeyDown = (e)=>{ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSendMessage(); } }; const formatTimestamp = (timestamp)=>{ const date = new Date(timestamp); return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); }; const clearConversation = ()=>{ if (window.confirm("Are you sure you want to clear the conversation history?")) { if (activeChat) { // Remove just the active conversation const newConversations = { ...conversations }; delete newConversations[activeChat]; setConversations(newConversations); // If there are other conversations, switch to the first one const remainingChats = Object.keys(newConversations); if (remainingChats.length > 0) { setActiveChat(remainingChats[0]); setMessages(newConversations[remainingChats[0]]); } else { // No conversations left setActiveChat(null); setMessages([]); } } setError(null); } }; // Sample chat history items const chatHistory = [ "NoCodeAI Builders List", "Payment Verification Failure", "Firestore real-time integration", "Sensitive Data Exposure", "Sending data to API", "GitHub 401 Bad Credentials" ]; // Function to handle web search const handleWebSearch = async ()=>{ if (!webSearchQuery.trim()) return; setToolLoading(true); setError(null); try { const userMessage = { role: "user", content: `Searching the web for: ${webSearchQuery}`, timestamp: new Date().toISOString() }; // Add search message to chat const updatedMessages = [ ...messages, userMessage ]; setMessages(updatedMessages); // Update conversations if (activeChat) { setConversations((prev)=>({ ...prev, [activeChat]: updatedMessages })); } // Call Google Search API const response = await fetch("/integrations/google-search/search?q=" + encodeURIComponent(webSearchQuery), { method: "GET" }); if (!response.ok) { throw new Error(`Search failed: ${response.status} ${response.statusText}`); } const data = await response.json(); console.log("Search results:", data); // Format search results let searchResultsText = "Here are the search results:\n\n"; if (data && data.items && data.items.length > 0) { data.items.forEach((item, index)=>{ searchResultsText += `${index + 1}. ${item.title}\n${item.link}\n${item.snippet}\n\n`; }); } else { searchResultsText += "No results found for your query."; } // Add results as assistant message const assistantMessage = { role: "assistant", content: searchResultsText, timestamp: new Date().toISOString() }; const finalMessages = [ ...updatedMessages, assistantMessage ]; setMessages(finalMessages); // Update conversations if (activeChat) { setConversations((prev)=>({ ...prev, [activeChat]: finalMessages })); } } catch (error) { console.error("Web search error:", error); // Add error message const errorMessage = { role: "assistant", content: `Error performing web search: ${error.message}`, timestamp: new Date().toISOString(), isError: true }; const errorMessages = [ ...messages, errorMessage ]; setMessages(errorMessages); if (activeChat) { setConversations((prev)=>({ ...prev, [activeChat]: errorMessages })); } setError(error.message); } finally{ setToolLoading(false); setWebSearchQuery(""); setShowWebSearchPrompt(false); } }; // Add missing function for web search key down handler const handleWebSearchKeyDown = (e)=>{ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleWebSearch(); } }; // Add missing function for web scraping key down handler const handleWebScrapingKeyDown = (e)=>{ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleWebScraping(); } }; // Function to handle web scraping const handleWebScraping = async ()=>{ if (!webScrapingUrl.trim()) return; setToolLoading(true); setError(null); try { const userMessage = { role: "user", content: `Scraping content from: ${webScrapingUrl}`, timestamp: new Date().toISOString() }; // Add scraping message to chat const updatedMessages = [ ...messages, userMessage ]; setMessages(updatedMessages); // Update conversations if (activeChat) { setConversations((prev)=>({ ...prev, [activeChat]: updatedMessages })); } // Call Web Scraping API const response = await fetch("/integrations/web-scraping/post", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url: webScrapingUrl, getText: true }) }); if (!response.ok) { throw new Error(`Scraping failed: ${response.status} ${response.statusText}`); } const data = await response.json(); console.log("Scraping results:", data); // Format scraped content (truncate if too long) let scrapedContent = data.text || data.content || "No content retrieved"; if (scrapedContent.length > 2000) { scrapedContent = scrapedContent.substring(0, 2000) + "... [Content truncated]"; } const assistantMessage = { role: "assistant", content: `Content from ${webScrapingUrl}:\n\n${scrapedContent}`, timestamp: new Date().toISOString() }; const finalMessages = [ ...updatedMessages, assistantMessage ]; setMessages(finalMessages); // Update conversations if (activeChat) { setConversations((prev)=>({ ...prev, [activeChat]: finalMessages })); } } catch (error) { console.error("Web scraping error:", error); // Add error message const errorMessage = { role: "assistant", content: `Error scraping the website: ${error.message}`, timestamp: new Date().toISOString(), isError: true }; const errorMessages = [ ...messages, errorMessage ]; setMessages(errorMessages); if (activeChat) { setConversations((prev)=>({ ...prev, [activeChat]: errorMessages })); } setError(error.message); } finally{ setToolLoading(false); setWebScrapingUrl(""); setShowWebScraperPrompt(false); } }; // Add new function for image generation const handleImageGeneration = async ()=>{ if (!imagePrompt.trim() || toolLoading) return; setToolLoading(true); setError(null); try { // Add user message about image generation const userMessage = { role: "user", content: `Generate an image of: ${imagePrompt}`, timestamp: new Date().toISOString() }; // Add to conversation const updatedMessages = [ ...messages, userMessage ]; setMessages(updatedMessages); if (activeChat) { setConversations((prev)=>({ ...prev, [activeChat]: updatedMessages })); } // Generate the image using selected model const endpoint = imageModel === "dall-e-3" ? "/integrations/dall-e-3/" : "/integrations/stable-diffusion-v-3/"; const response = await fetch(`${endpoint}?prompt=${encodeURIComponent(imagePrompt)}`, { method: "GET" }); if (!response.ok) { throw new Error(`Image generation failed: ${response.status} ${response.statusText}`); } const data = await response.json(); // Check if we have image data if (!data.data || !data.data[0]) { throw new Error("No image was generated"); } const imageUrl = data.data[0]; // Create assistant message with the generated image const assistantMessage = { role: "assistant", content: `Here's your generated image:`, timestamp: new Date().toISOString(), imageUrl: imageUrl, isGeneratedImage: true }; // Add to conversation const finalMessages = [ ...updatedMessages, assistantMessage ]; setMessages(finalMessages); if (activeChat) { setConversations((prev)=>({ ...prev, [activeChat]: finalMessages })); } } catch (error) { console.error("Image generation error:", error); // Add error message const errorMessage = { role: "assistant", content: `Error generating image: ${error.message}`, timestamp: new Date().toISOString(), isError: true }; const errorMessages = [ ...messages, errorMessage ]; setMessages(errorMessages); if (activeChat) { setConversations((prev)=>({ ...prev, [activeChat]: errorMessages })); } setError(error.message); } finally{ setToolLoading(false); setImagePrompt(""); setShowImagePrompt(false); } }; // Update handleToolClick to include image generation const handleToolClick = (tool)=>{ switch(tool){ case "web-search": setShowWebSearchPrompt(true); setShowWebScraperPrompt(false); setShowImagePrompt(false); setShowTools(false); break; case "web-scraper": setShowWebScraperPrompt(true); setShowWebSearchPrompt(false); setShowImagePrompt(false); setShowTools(false); break; case "image-generator": setShowImagePrompt(true); setShowWebSearchPrompt(false); setShowWebScraperPrompt(false); setShowTools(false); break; default: // Handle other tools setShowTools(false); break; } }; // Handle image prompt key down const handleImagePromptKeyDown = (e)=>{ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleImageGeneration(); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-[#0a0a0a] text-white font-sans", __source: { fileName: "", lineNumber: 1641, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `bg-[#202123] w-64 flex-shrink-0 transition-all duration-300 ${sidebarOpen ? "translate-x-0" : "-translate-x-full"} fixed h-full z-20`, __source: { fileName: "", lineNumber: 1643, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full", __source: { fileName: "", lineNumber: 1648, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end p-2", __source: { fileName: "", lineNumber: 1650, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSidebarOpen(false), className: "text-gray-400 hover:text-white p-1 rounded-md", title: "Close sidebar", __source: { fileName: "", lineNumber: 1651, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 1656, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 1663, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "p-3", __source: { fileName: "", lineNumber: 1675, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: createNewChat, className: "w-full flex items-center gap-3 rounded-md border border-white/20 p-3 text-sm hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 1676, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 1680, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M12 5V19M5 12H19", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 1687, columnNumber: 17 }, __self: this })), "New chat")), /*#__PURE__*/ React.createElement("div", { className: "px-3 py-2 flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 1700, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "space-y-2", __source: { fileName: "", lineNumber: 1701, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full flex items-center gap-3 rounded-md p-3 text-sm hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 1702, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 1703, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M21 12L15 12M15 12L21 12M15 12L15 6M15 12L15 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 1710, columnNumber: 19 }, __self: this })), "Search chats"), /*#__PURE__*/ React.createElement("button", { className: "w-full flex items-center gap-3 rounded-md p-3 text-sm hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 1721, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 1722, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M4 19.5C4 20.1046 4.89543 21 6 21H18C19.1046 21 20 20.1046 20 19V17", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 1729, columnNumber: 19 }, __self: this })), "Library"), /*#__PURE__*/ React.createElement("button", { className: "w-full flex items-center gap-3 rounded-md p-3 text-sm hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 1740, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 1741, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", __source: { fileName: "", lineNumber: 1748, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M10 8L21 3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 1755, columnNumber: 19 }, __self: this })), "Sora"), /*#__PURE__*/ React.createElement("button", { className: "w-full flex items-center gap-3 rounded-md p-3 text-sm hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 1766, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 1767, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M4 19.5C4 20.1046 4.89543 21 6 21H18C19.1046 21 20 20.1046 20 19V17", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 1774, columnNumber: 19 }, __self: this })), "GPTs"), /*#__PURE__*/ React.createElement("button", { className: "w-full flex items-center gap-3 rounded-md p-3 text-sm hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 1785, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center w-5 h-5 bg-gray-600 rounded-md text-xs", __source: { fileName: "", lineNumber: 1786, columnNumber: 17 }, __self: this }, "M"), "Software Architect GPT"), /*#__PURE__*/ React.createElement("button", { className: "w-full flex items-center gap-3 rounded-md p-3 text-sm hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 1792, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center w-5 h-5 bg-blue-600 rounded-full text-xs overflow-hidden", __source: { fileName: "", lineNumber: 1793, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 1794, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M20 21V19C20 17.5228 19.7893 16.9217 19.4142 16.1716C19.0391 16.9214 18.0783 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 3 17.5228 3 19V21", stroke: "white", strokeWidth: "2", __source: { fileName: "", lineNumber: 1801, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z", stroke: "white", strokeWidth: "2", __source: { fileName: "", lineNumber: 1806, columnNumber: 21 }, __self: this }))), "Software Engineer")), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 1818, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xs text-gray-500 font-medium mb-2", __source: { fileName: "", lineNumber: 1819, columnNumber: 15 }, __self: this }, "Chats"), /*#__PURE__*/ React.createElement("div", { className: "space-y-1", __source: { fileName: "", lineNumber: 1820, columnNumber: 15 }, __self: this }, Object.keys(conversations).map((chatId)=>/*#__PURE__*/ React.createElement("button", { key: chatId, onClick: ()=>switchChat(chatId), className: `w-full text-left p-2 text-sm rounded-md hover:bg-gray-700 transition-colors truncate ${activeChat === chatId ? "bg-gray-700" : ""}`, __source: { fileName: "", lineNumber: 1822, columnNumber: 19 }, __self: this }, getChatTitle(chatId)))))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col h-full overflow-hidden relative", __source: { fileName: "", lineNumber: 1837, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-1/2 transform -translate-x-1/2 z-10 flex items-center gap-4", __source: { fileName: "", lineNumber: 1839, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 1840, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 1841, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M8 5H6C4.89543 5 4 5.89543 4 7V19C4 20.1046 4.89543 21 6 21H18C19.1046 21 20 20.1046 20 19V17", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 1848, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M15 3H21V9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 1855, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M10 14L21 3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 1862, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 1873, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center gap-2 p-2 text-gray-400 hover:text-white rounded-md", onClick: ()=>setShowModelSelector(!showModelSelector), __source: { fileName: "", lineNumber: 1874, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs font-medium", __source: { fileName: "", lineNumber: 1878, columnNumber: 15 }, __self: this }, selectedModel === "gpt-4-vision-preview" ? "GPT-4" : selectedModel === "gpt-3.5-turbo" ? "GPT-3.5" : selectedModel), /*#__PURE__*/ React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 1885, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M6 9L12 15L6 19", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 1892, columnNumber: 17 }, __self: this }))), showModelSelector && /*#__PURE__*/ React.createElement("div", { className: "absolute top-full left-0 mt-1 bg-[#202123] rounded-md shadow-lg p-1 w-48 z-10", __source: { fileName: "", lineNumber: 1903, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `w-full text-left p-2 text-xs rounded-md ${selectedModel === "gpt-3.5-turbo" ? "bg-gray-700" : "hover:bg-gray-700"}`, onClick: ()=>{ setSelectedModel("gpt-3.5-turbo"); setShowModelSelector(false); }, __source: { fileName: "", lineNumber: 1904, columnNumber: 17 }, __self: this }, "GPT-3.5"), /*#__PURE__*/ React.createElement("button", { className: `w-full text-left p-2 text-xs rounded-md ${selectedModel === "gpt-4-vision-preview" ? "bg-gray-700" : "hover:bg-gray-700"}`, onClick: ()=>{ setSelectedModel("gpt-4-vision-preview"); setShowModelSelector(false); }, __source: { fileName: "", lineNumber: 1913, columnNumber: 17 }, __self: this }, "GPT-4"), /*#__PURE__*/ React.createElement("button", { className: `w-full text-left p-2 text-xs rounded-md ${selectedModel === "gpt-4-turbo" ? "bg-gray-700" : "hover:bg-gray-700"}`, onClick: ()=>{ setSelectedModel("gpt-4-turbo"); setShowModelSelector(false); }, __source: { fileName: "", lineNumber: 1922, columnNumber: 17 }, __self: this }, "GPT-4 Turbo")))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-600 text-white p-2 text-center", __source: { fileName: "", lineNumber: 1940, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1941, columnNumber: 13 }, __self: this }, "Error: ", error)), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 pt-16", __source: { fileName: "", lineNumber: 1946, columnNumber: 9 }, __self: this }, messages.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-full text-center", __source: { fileName: "", lineNumber: 1948, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 bg-[#10a37f] rounded-full flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 1949, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 1950, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 20.48 5.93 20.3 5.73223C20.12 5.53457 19.62 5.39457 19 5.39457H5C4.38 5.39457 3.88 5.53457 3.7 5.73223C3.52 5.93 3 6.48 3 7.5V12C3 11.47 3.52 10.07 3.7 9.73223C4.42 9.39457 5.41 9.26339 5 9.26339H12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 1957, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M16 10C16 13.866 13.866 17 10 17C6.13401 17 3 10C3 6.13401 6.13401 3 10 3H18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 1964, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M8 20L12 16L16 20", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 1971, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M12 16V20", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 1978, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-2", __source: { fileName: "", lineNumber: 1987, columnNumber: 15 }, __self: this }, "How can I help you today?"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 max-w-md", __source: { fileName: "", lineNumber: 1990, columnNumber: 15 }, __self: this }, "Ask me anything, from simple questions to complex problems. I'm here to assist!")) : /*#__PURE__*/ React.createElement("div", { className: "space-y-6 max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 1996, columnNumber: 13 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.role === "user" ? "justify-end" : message.role === "system" && message.isInfo ? "justify-center" : "justify-start"} message-animation`, __source: { fileName: "", lineNumber: 1998, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-3xl rounded-lg p-4 ${message.role === "user" ? "bg-[#343541]" : message.isError ? "bg-red-900/20" : message.role === "system" && message.isInfo ? "bg-blue-900/20 text-xs text-blue-200" : "bg-[#343541]"}`, __source: { fileName: "", lineNumber: 2008, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start", __source: { fileName: "", lineNumber: 2019, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 2020, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 2021, columnNumber: 25 }, __self: this }, message.content, message.role === "user" && message.imageUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 2025, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: message.imageUrl, alt: "Uploaded", className: "max-w-xs rounded-md", __source: { fileName: "", lineNumber: 2026, columnNumber: 31 }, __self: this })), message.role === "assistant" && message.imageUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 2035, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: message.imageUrl, alt: "Generated", className: "max-w-xs rounded-md", __source: { fileName: "", lineNumber: 2036, columnNumber: 31 }, __self: this })))))))), isTyping && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 2052, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl rounded-lg p-4 bg-[#343541]", __source: { fileName: "", lineNumber: 2053, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start", __source: { fileName: "", lineNumber: 2054, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 2055, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 2056, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "typing-indicator", __source: { fileName: "", lineNumber: 2057, columnNumber: 27 }, __self: this }, Array(typingDots).fill(".").join(""))))))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 2067, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-4 relative", __source: { fileName: "", lineNumber: 2073, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative max-w-3xl mx-auto bg-[#222222] rounded-xl shadow-xl", __source: { fileName: "", lineNumber: 2074, columnNumber: 11 }, __self: this }, showWebSearchPrompt && /*#__PURE__*/ React.createElement("div", { className: "p-3 border-b border-gray-700", __source: { fileName: "", lineNumber: 2077, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 2078, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: webSearchQuery, onChange: (e)=>setWebSearchQuery(e.target.value), onKeyDown: handleWebSearchKeyDown, placeholder: "Enter search query...", className: "flex-1 bg-[#2a2a2a] border border-gray-600 rounded-md p-2 text-white focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 2079, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleWebSearch, disabled: toolLoading || !webSearchQuery.trim(), className: `ml-2 p-2 rounded-md ${toolLoading || !webSearchQuery.trim() ? "bg-gray-700 text-gray-500" : "bg-blue-600 text-white hover:bg-blue-700"}`, __source: { fileName: "", lineNumber: 2087, columnNumber: 19 }, __self: this }, toolLoading ? "Searching..." : "Search"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowWebSearchPrompt(false), className: "ml-2 p-2 text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 2094, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 2098, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2105, columnNumber: 23 }, __self: this }))))), showWebScraperPrompt && /*#__PURE__*/ React.createElement("div", { className: "p-3 border-b border-gray-700", __source: { fileName: "", lineNumber: 2120, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 2121, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: webScrapingUrl, onChange: (e)=>setWebScrapingUrl(e.target.value), onKeyDown: handleWebScrapingKeyDown, placeholder: "Enter URL to scrape (include https://)", className: "flex-1 bg-[#2a2a2a] border border-gray-600 rounded-md p-2 text-white focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 2122, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleWebScraping, disabled: toolLoading || !webScrapingUrl.trim(), className: `ml-2 p-2 rounded-md ${toolLoading || !webScrapingUrl.trim() ? "bg-gray-700 text-gray-500" : "bg-blue-600 text-white hover:bg-blue-700"}`, __source: { fileName: "", lineNumber: 2130, columnNumber: 19 }, __self: this }, toolLoading ? "Scraping..." : "Scrape"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowWebScraperPrompt(false), className: "ml-2 p-2 text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 2137, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 2141, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2148, columnNumber: 23 }, __self: this }))))), showImagePrompt && /*#__PURE__*/ React.createElement("div", { className: "p-3 border-b border-gray-700", __source: { fileName: "", lineNumber: 2163, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 2164, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 2165, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-300 mr-2", __source: { fileName: "", lineNumber: 2166, columnNumber: 21 }, __self: this }, "Model:"), /*#__PURE__*/ React.createElement("button", { className: `px-2 py-1 text-xs rounded-md mr-2 ${imageModel === "dall-e-3" ? "bg-blue-600 text-white" : "bg-gray-700 text-gray-300"}`, onClick: ()=>setImageModel("dall-e-3"), __source: { fileName: "", lineNumber: 2167, columnNumber: 21 }, __self: this }, "DALL·E 3"), /*#__PURE__*/ React.createElement("button", { className: `px-2 py-1 text-xs rounded-md ${imageModel === "stable-diffusion" ? "bg-blue-600 text-white" : "bg-gray-700 text-gray-300"}`, onClick: ()=>setImageModel("stable-diffusion"), __source: { fileName: "", lineNumber: 2173, columnNumber: 21 }, __self: this }, "Stable Diffusion")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 2180, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: imagePrompt, onChange: (e)=>setImagePrompt(e.target.value), onKeyDown: handleImagePromptKeyDown, placeholder: "Describe the image you want to generate...", className: "flex-1 bg-[#2a2a2a] border border-gray-600 rounded-md p-2 text-white focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 2181, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleImageGeneration, disabled: toolLoading || !imagePrompt.trim(), className: `ml-2 p-2 rounded-md ${toolLoading || !imagePrompt.trim() ? "bg-gray-700 text-gray-500" : "bg-blue-600 text-white hover:bg-blue-700"}`, __source: { fileName: "", lineNumber: 2189, columnNumber: 21 }, __self: this }, toolLoading ? "Generating..." : "Generate"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowImagePrompt(false), className: "ml-2 p-2 text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 2196, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 2200, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2207, columnNumber: 25 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "flex items-start p-3", __source: { fileName: "", lineNumber: 2222, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSidebarOpen(!sidebarOpen), className: "text-gray-400 hover:text-white p-2 mr-1", __source: { fileName: "", lineNumber: 2224, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 2228, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M4 6H20M4 12H20M4 18H20", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2235, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>fileInputRef.current.click(), className: "text-gray-400 hover:text-white p-2 mr-1", title: "Upload an image", __source: { fileName: "", lineNumber: 2246, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 2251, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M21 12V19C21 20.1046 20.48 21 20 21H18C19.1046 21 20 20.1046 20 19V17", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2258, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M16 10C16 13.866 13.866 17 10 17C6.13401 17 3 10C3 6.13401 6.13401 3 10 3H18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2265, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M8 20L12 16L16 20", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2272, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M12 16V20", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2279, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("input", { type: "file", ref: fileInputRef, className: "hidden", accept: "image/*", onChange: handleFileChange, __source: { fileName: "", lineNumber: 2288, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 relative", __source: { fileName: "", lineNumber: 2297, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: input, onChange: (e)=>setInput(e.target.value), onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: "Message ChatGPT...", className: "w-full bg-[#2a2a2a] border border-gray-600 rounded-md p-3 pr-12 text-white focus:outline-none focus:border-blue-500 resize-none min-h-[52px] max-h-[200px] overflow-auto", rows: input.split("\n").length > 3 ? 3 : input.split("\n").length || 1, __source: { fileName: "", lineNumber: 2298, columnNumber: 17 }, __self: this }), filePreview && /*#__PURE__*/ React.createElement("div", { className: "mt-2 relative", __source: { fileName: "", lineNumber: 2314, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: filePreview, alt: "Preview", className: "max-h-32 rounded-md", __source: { fileName: "", lineNumber: 2315, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSelectedFile(null); setFilePreview(null); }, className: "absolute top-1 right-1 bg-black bg-opacity-60 rounded-full p-1 text-white", title: "Remove image", __source: { fileName: "", lineNumber: 2320, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 2328, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2335, columnNumber: 25 }, __self: this }))))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowTools(!showTools), className: "text-gray-400 hover:text-white p-2 ml-1", __source: { fileName: "", lineNumber: 2349, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 2353, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M12 6V12M12 12V18M12 12H18M12 12H6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2360, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, disabled: loading || !input.trim() && !selectedFile, className: `text-white p-2 ml-1 rounded-md ${loading || !input.trim() && !selectedFile ? "bg-gray-700 cursor-not-allowed" : "bg-blue-600 hover:bg-blue-700"}`, __source: { fileName: "", lineNumber: 2371, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("svg", { className: "animate-spin h-5 w-5", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 2381, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", __source: { fileName: "", lineNumber: 2387, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 0 1 8-8V0C5.373 0 5 4.52 5 6V8H14V6C14 4.9 13.1 4 12 4C10 4 10 4.9 10 6V8H14V6C14 4.9 13.1 4 12 4Z", __source: { fileName: "", lineNumber: 2395, columnNumber: 21 }, __self: this })) : /*#__PURE__*/ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 2402, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M22 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 10C3 6.13401 6.13401 3 10 3H18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2409, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M12 4C10 4 10 4.9 10 6V8H14V6C14 4.9 13.1 4 12 4Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2416, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M8 20L12 16L16 20", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2423, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M12 16V20", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2430, columnNumber: 21 }, __self: this })))), showTools && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-full left-0 mb-2 w-56 bg-[#202123] rounded-md shadow-lg overflow-hidden z-10", __source: { fileName: "", lineNumber: 2444, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-1", __source: { fileName: "", lineNumber: 2445, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleToolClick("web-search"), className: "flex items-center w-full text-left px-3 py-2 text-sm rounded-md hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 2446, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "mr-2", __source: { fileName: "", lineNumber: 2450, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 10C3 6.13401 6.13401 3 10 3H18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2458, columnNumber: 23 }, __self: this })), "Web Search"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleToolClick("web-scraper"), className: "flex items-center w-full text-left px-3 py-2 text-sm rounded-md hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 2469, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "mr-2", __source: { fileName: "", lineNumber: 2473, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M8 5H6C4.89543 5 4 5.89543 4 7V19C4 20.1046 4.89543 21 6 21H18C19.1046 21 20 20.1046 20 19V17", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2481, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M15 3H21V9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2488, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M10 14L21 3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2495, columnNumber: 23 }, __self: this })), "Web Scraper"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleToolClick("image-generator"), className: "flex items-center w-full text-left px-3 py-2 text-sm rounded-md hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 2506, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "mr-2", __source: { fileName: "", lineNumber: 2510, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M9 8H5.41C4.52 8 4.07 9.08 4.7 9.71L7 12M16 8H19.59C20.48 8 20.93 9.08 20.3 9.71L18 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2518, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M12 4C10 4 10 4.9 10 6V8H14V6C14 4.9 13.1 4 12 4Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2525, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M8 20L12 16L16 20", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2532, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M12 16V20", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2539, columnNumber: 23 }, __self: this })), "Image Generator"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.href = "/linkedin-lookup", className: "flex items-center w-full text-left px-3 py-2 text-sm rounded-md hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 2551, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "mr-2", __source: { fileName: "", lineNumber: 2555, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2563, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("rect", { x: "2", y: "9", width: "4", height: "12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2570, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "4", cy: "4", r: "2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 2580, columnNumber: 23 }, __self: this })), "LinkedIn Profile Lookup")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 2598, columnNumber: 11 }, __self: this }, ` pre { background-color: #1e1e1e; border-radius: 6px; padding: 10px; overflow-x: auto; position: relative; margin: 10px 0; } pre code { font-family: 'Fira Code', monospace; font-size: 14px; line-height: 1.5; color: #d4d4d4; } /* Add copy button to code blocks */ pre:hover .copy-code { display: block; } .copy-code { position: absolute; top: 5px; right: 5px; background: #2d2d2d; color: #d4d4d4; border: none; border-radius: 4px; padding: 4px 8px; font-size: 12px; cursor: pointer; display: none; } .copy-code:hover { background: #3d3d3d; } /* Syntax highlighting */ .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6a9955; } .token.punctuation { color: #d4d4d4; } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #b5cea8; } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #ce9178; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #d4d4d4; } .token.atrule, .token.attr-value, .token.keyword { color: #569cd6; } .token.function, .token.class-name { color: #dcdcaa; } .token.regex, .token.important, .token.variable { color: #d16969; } /* Typing indicator */ .typing-indicator { font-size: 24px; opacity: 0.7; letter-spacing: 2px; } /* Message animation */ @keyframes messageAppear { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .message-animation { animation: messageAppear 0.5s ease-out forwards; } `)))); }