[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_163":164,"_165":166},"routes/_app.x.$handle.$name",{"_94":93,"_32":45,"_102":84,"_27":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":25,"_117":118,"_119":49,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",3,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","bd2300da-2825-11f0-af78-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n// Global blocklist definition\nconst BLOCKLIST = [\n \"google-analytics.com\",\n \"doubleclick.net\",\n \"ads.example.com\",\n];\n\n// Main App component\nfunction App() {\n const [messages, setMessages] = useState([]);\n const [input, setInput] = useState(\"\");\n const [urls, setUrls] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [showUrlSettings, setShowUrlSettings] = useState(false);\n const chatContainerRef = useRef(null);\n const messageInputRef = useRef(null);\n\n useEffect(() => {\n // Load configuration on mount\n fetchConfig();\n }, []);\n\n useEffect(() => {\n // Scroll to bottom on new messages\n if (chatContainerRef.current) {\n chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;\n }\n }, [messages]);\n\n const fetchConfig = async () => {\n try {\n const response = await fetch(\"/api/config\");\n if (response.ok) {\n const config = await response.json();\n setUrls(config.urls || []);\n }\n } catch (error) {\n console.error(\"Failed to fetch configuration:\", error);\n }\n };\n\n const saveUrls = async () => {\n setIsLoading(true);\n try {\n const response = await fetch(\"/api/save-urls\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ urls }),\n });\n\n if (response.ok) {\n setShowUrlSettings(false);\n setMessages(prev => [...prev, { role: \"system\", content: \"URLが保存され、コンテキストが更新されました。\" }]);\n\n // Initialize context after saving URLs\n const initResponse = await fetch(\"/api/initialize-context\");\n if (initResponse.ok) {\n const result = await initResponse.json();\n if (result.success) {\n setMessages(\n prev => [...prev, { role: \"system\", content: \"コンテキストの読み込みが完了しました。準備完了。\" }]\n );\n }\n }\n } else {\n throw new Error(\"Failed to save URLs\");\n }\n } catch (error) {\n console.error(\"Error saving URLs:\", error);\n setMessages(prev => [...prev, { role: \"system\", content: `エラー: ${error.message}` }]);\n } finally {\n setIsLoading(false);\n }\n };\n\n const sendMessage = async () => {\n if (!input.trim()) return;\n\n const userMessage = input;\n setInput(\"\");\n setMessages(prev => [...prev, { role: \"user\", content: userMessage }]);\n\n setIsLoading(true);\n try {\n const response = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: userMessage }),\n });\n\n if (response.ok) {\n const result = await response.json();\n setMessages(prev => [...prev, { role: \"assistant\", content: result.response }]);\n } else {\n throw new Error(\"ChatGPT response failed\");\n }\n } catch (error) {\n console.error(\"Error sending message:\", error);\n setMessages(prev => [...prev, { role: \"system\", content: `エラー: ${error.message}` }]);\n } finally {\n setIsLoading(false);\n if (messageInputRef.current) {\n messageInputRef.current.focus();\n }\n }\n };\n\n const handleKeyPress = (e) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n sendMessage();\n }\n };\n\n return (\n

\n {showUrlSettings\n ? (\n

URL設定

URLを入力してください（1行に1つ）:

\n setUrls(e.target.value.split(\"\\n\").map(url => url.trim()).filter(url => url))}\n rows={10}\n className=\"url-textarea\"\n />\n

\n \n \n

\n )\n : (\n <>\n

GPT-4o Web Analysis Chat

\n \n

\n {messages.map((message, index) => (\n

{message.content}

\n ))}\n {isLoading && (\n

処理中...

\n )}\n

\n setInput(e.target.value)}\n onKeyPress={handleKeyPress}\n placeholder=\"メッセージを入力...\"\n rows={2}\n disabled={isLoading}\n className=\"message-input\"\n />\n \n

\n \n )}\n

\n View Source\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n const KEY = \"glowingGoldHawk\";\n\n // API endpoints\n if (url.pathname === \"/api/config\") {\n return handleGetConfig(KEY);\n } else if (url.pathname === \"/api/save-urls\") {\n return handleSaveUrls(request, KEY);\n } else if (url.pathname === \"/api/initialize-context\") {\n return handleInitializeContext(KEY);\n } else if (url.pathname === \"/api/chat\") {\n return handleChat(request, KEY);\n }\n\n // Main HTML page\n return new Response(\n `\n \n \n \n \n \n GPT-4o Web Analysis Chat\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}\n\n// Helper functions for server-side\nasync function handleGetConfig(key: string) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n try {\n const config = await blob.getJSON(`${key}_config`) || { urls: [] };\n return Response.json(config);\n } catch (error) {\n return Response.json({ urls: [] });\n }\n}\n\nasync function handleSaveUrls(request: Request, key: string) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n try {\n const data = await request.json();\n await blob.setJSON(`${key}_config`, { urls: data.urls });\n return Response.json({ success: true });\n } catch (error) {\n return Response.json({ success: false, error: error.message }, { status: 500 });\n }\n}\n\nasync function handleInitializeContext(key: string) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n\n try {\n // Get config with URLs\n const config = await blob.getJSON(`${key}_config`) || { urls: [] };\n\n if (!config.urls || config.urls.length === 0) {\n return Response.json({ success: false, error: \"No URLs configured\" });\n }\n\n // Scrape websites and build context\n const scrapedContents = [];\n\n for (const url of config.urls) {\n try {\n const content = await scrapeWebsite(url);\n if (content) {\n scrapedContents.push({ url, content: content.text });\n // Random delay between requests to be nice to servers\n await new Promise(resolve => setTimeout(resolve, Math.random() * 3000 + 2000));\n }\n } catch (error) {\n console.error(`Error scraping ${url}:`, error);\n }\n }\n\n // Build context from scraped content\n const context = `\nあなたはwebサイトのコンテンツを分析する専門家です。\n以下の複数のWebサイトから抽出されたコンテンツを分析し、質問に答えてください。\n\n${scrapedContents.map(c => `---URL: ${c.url}---\\n${c.content}\\n`).join(\"\\n\")}\n`;\n\n // Save context to blob storage\n await blob.setJSON(`${key}_context`, { context });\n\n // Initialize chat history\n await blob.setJSON(`${key}_chat_history`, { messages: [] });\n\n return Response.json({ success: true });\n } catch (error) {\n console.error(\"Error initializing context:\", error);\n return Response.json({ success: false, error: error.message }, { status: 500 });\n }\n}\n\nasync function handleChat(request: Request, key: string) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n\n try {\n const data = await request.json();\n const userMessage = data.message;\n\n // Get stored context and chat history\n const contextData = await blob.getJSON(`${key}_context`) || { context: \"\" };\n const historyData = await blob.getJSON(`${key}_chat_history`) || { messages: [] };\n\n // Prepare messages for OpenAI\n const messages = [\n ...historyData.messages,\n { role: \"user\", content: contextData.context ? `${contextData.context}\\n\\n質問: ${userMessage}` : userMessage },\n ];\n\n // Initialize OpenAI\n const openai = new OpenAI();\n\n // Send to OpenAI\n const completion = await openai.chat.completions.create({\n messages: messages.map(m => ({ role: m.role, content: m.content })),\n model: \"gpt-4o\",\n temperature: 0.1,\n });\n\n const response = completion.choices[0].message.content;\n\n // Update chat history\n historyData.messages.push({ role: \"user\", content: userMessage });\n historyData.messages.push({ role: \"assistant\", content: response });\n await blob.setJSON(`${key}_chat_history`, historyData);\n\n return Response.json({ response });\n } catch (error) {\n console.error(\"Error in chat:\", error);\n return Response.json({ response: `エラーが発生しました: ${error.message}` }, { status: 500 });\n }\n}\n\n// Web scraping implementation\nasync function scrapeWebsite(url: string, retries = 3, timeout = 10000) {\n const headers = {\n \"User-Agent\":\n \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36\",\n \"Accept\":\n \"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7\",\n \"Accept-Language\": \"ja,en-US;q=0.9,en;q=0.8\",\n \"Accept-Encoding\": \"gzip, deflate, br\",\n \"Connection\": \"keep-alive\",\n \"Upgrade-Insecure-Requests\": \"1\",\n \"Sec-Ch-Ua\": \"\\\"Not A(Brand\\\";v=\\\"99\\\", \\\"Google Chrome\\\";v=\\\"121\\\", \\\"Chromium\\\";v=\\\"121\\\"\",\n \"Sec-Ch-Ua-Mobile\": \"?0\",\n \"Sec-Ch-Ua-Platform\": \"\\\"Windows\\\"\",\n \"Sec-Fetch-Dest\": \"document\",\n \"Sec-Fetch-Mode\": \"navigate\",\n \"Sec-Fetch-Site\": \"none\",\n \"Sec-Fetch-User\": \"?1\",\n \"Cache-Control\": \"max-age=0\",\n \"DNT\": \"1\",\n };\n\n // Check if URL is in blocklist\n if (isBlocklisted(url)) {\n console.warn(`ブロックリストにあるURLをスキップ: ${url}`);\n return null;\n }\n\n // Try to scrape with retries\n for (let attempt = 0; attempt < retries; attempt++) {\n try {\n console.log(`(${attempt + 1}/${retries}) ${url} のスクレイピングを試行中...`);\n\n const response = await fetch(url, {\n method: \"GET\",\n headers: headers,\n signal: timeout ? AbortSignal.timeout(timeout) : undefined,\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error ${response.status}: ${response.statusText}`);\n }\n\n const html = await response.text();\n\n // Use DOMParser for HTML parsing\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, \"text/html\");\n\n // Remove unwanted elements\n const unwantedSelectors = [\"script\", \"style\", \"head\", \"iframe\", \"noscript\", \"footer\", \"header\"];\n unwantedSelectors.forEach(selector => {\n doc.querySelectorAll(selector).forEach(element => element.remove());\n });\n\n // Extract main content\n let mainContent = doc.querySelector(\"main\") || doc.querySelector(\"article\") || doc.querySelector(\"#content\");\n let text = mainContent\n ? getTextContent(mainContent)\n : getTextContent(doc.body);\n\n // Extract and normalize links\n const links = Array.from(doc.querySelectorAll(\"a\"))\n .map(a => a.getAttribute(\"href\"))\n .filter(href => href)\n .map(href => normalizeUrl(url, href));\n\n return { text, links };\n } catch (error) {\n console.error(`${url} - Error: ${error.message} (attempt ${attempt + 1}/${retries})`);\n\n if (attempt < retries - 1) {\n // Exponential backoff with jitter\n const waitTime = Math.random() * 3000 + 3000 * Math.pow(2, attempt);\n console.log(`${url} - Waiting ${waitTime.toFixed(2)}ms before retrying...`);\n await new Promise(resolve => setTimeout(resolve, waitTime));\n } else {\n console.error(`${url} - Failed to scrape (max retries reached)`);\n return null;\n }\n }\n }\n\n return null;\n}\n\n// Helper functions for web scraping\nfunction isBlocklisted(url: string): boolean {\n try {\n const parsedUrl = new URL(url);\n const hostname = parsedUrl.hostname;\n return BLOCKLIST.some(blockedDomain => hostname.includes(blockedDomain));\n } catch {\n return false;\n }\n}\n\nfunction normalizeUrl(baseUrl: string, relativeUrl: string): string {\n try {\n const absoluteUrl = new URL(relativeUrl, baseUrl).href;\n // Remove query params and hash fragments\n const parsedUrl = new URL(absoluteUrl);\n parsedUrl.search = \"\";\n parsedUrl.hash = \"\";\n return parsedUrl.toString();\n } catch {\n return \"\";\n }\n}\n\nfunction getTextContent(element: Element): string {\n const walker = document.createTreeWalker(\n element,\n NodeFilter.SHOW_TEXT,\n null,\n );\n\n let text = \"\";\n let node;\n while (node = walker.nextNode()) {\n // Skip if parent is hidden\n if (isNodeVisible(node)) {\n const nodeText = node.textContent?.trim();\n if (nodeText) {\n text += nodeText + \" \";\n }\n }\n }\n\n return text.replace(/\\s+/g, \" \").trim();\n}\n\nfunction isNodeVisible(node: Node): boolean {\n if (!(node.parentElement instanceof HTMLElement)) {\n return true;\n }\n\n const style = window.getComputedStyle(node.parentElement);\n return style.display !== \"none\"\n && style.visibility !== \"hidden\"\n && style.opacity !== \"0\";\n}\n\n// DOM Parser polyfill for server-side use\nclass DOMParser {\n parseFromString(html: string, mimeType: string): Document {\n // This is a simplified version for our needs\n const doc = {\n body: { textContent: html },\n querySelectorAll: () => [],\n querySelector: () => null,\n } as unknown as Document;\n return doc;\n }\n}\n\n// Polyfill for browser-only APIs when running server-side\nif (typeof window === \"undefined\") {\n // @ts-ignore\n globalThis.DOMParser = DOMParser;\n // @ts-ignore\n globalThis.NodeFilter = { SHOW_TEXT: 4 };\n}\n\n// Styles\nconst css = `\n:root {\n --bg-color: #f5f5f5;\n --chat-bg: #ffffff;\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --user-message-bg: #e8f4fd;\n --assistant-message-bg: #f0f0f0;\n --system-message-bg: #ffe8e8;\n --border-color: #ddd;\n --text-color: #333;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--bg-color);\n height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.app-container {\n max-width: 100%;\n width: 100%;\n height: 100vh;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n background-color: var(--chat-bg);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\n.chat-header {\n padding: 15px 20px;\n background-color: var(--primary-color);\n color: white;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid var(--border-color);\n}\n\n.chat-header h1 {\n font-size: 1.5rem;\n margin: 0;\n}\n\n.settings-button {\n background-color: var(--secondary-color);\n color: white;\n border: none;\n padding: 8px 15px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 0.9rem;\n}\n\n.settings-button:hover {\n background-color: #2980b9;\n}\n\n.chat-container {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 15px;\n}\n\n.message {\n padding: 12px 15px;\n border-radius: 8px;\n max-width: 85%;\n position: relative;\n}\n\n.message.user {\n align-self: flex-end;\n background-color: var(--user-message-bg);\n border-bottom-right-radius: 2px;\n}\n\n.message.assistant {\n align-self: flex-start;\n background-color: var(--assistant-message-bg);\n border-bottom-left-radius: 2px;\n}\n\n.message.system {\n align-self: center;\n background-color: var(--system-message-bg);\n font-style: italic;\n max-width: 90%;\n}\n\n.message-content {\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.loading:after {\n content: \"...\";\n animation: dots 1.5s infinite;\n display: inline-block;\n width: 20px;\n text-align: left;\n}\n\n@keyframes dots {\n 0%, 20% { content: \".\"; }\n 40% { content: \"..\"; }\n 60%, 100% { content: \"...\"; }\n}\n\n.input-container {\n display: flex;\n padding: 15px;\n border-top: 1px solid var(--border-color);\n background-color: white;\n}\n\n.message-input {\n flex: 1;\n padding: 12px;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n resize: none;\n font-family: inherit;\n font-size: 1rem;\n}\n\n.send-button {\n background-color: var(--secondary-color);\n color: white;\n border: none;\n padding: 0 20px;\n margin-left: 10px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 1rem;\n}\n\n.send-button:hover {\n background-color: #2980b9;\n}\n\n.send-button:disabled {\n background-color: #ccc;\n cursor: not-allowed;\n}\n\n.settings-container {\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 15px;\n height: 100%;\n}\n\n.settings-container h2 {\n color: var(--primary-color);\n margin-bottom: 10px;\n}\n\n.url-textarea {\n width: 100%;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n font-family: inherit;\n font-size: 1rem;\n min-height: 200px;\n}\n\n.button-container {\n display: flex;\n gap: 10px;\n margin-top: 20px;\n}\n\n.save-button, .cancel-button {\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 1rem;\n}\n\n.save-button {\n background-color: var(--secondary-color);\n color: white;\n}\n\n.save-button:hover {\n background-color: #2980b9;\n}\n\n.cancel-button {\n background-color: #e74c3c;\n color: white;\n}\n\n.cancel-button:hover {\n background-color: #c0392b;\n}\n\n.footer {\n padding: 10px;\n text-align: center;\n font-size: 0.8rem;\n border-top: 1px solid var(--border-color);\n}\n\n.footer a {\n color: var(--secondary-color);\n text-decoration: none;\n}\n\n.footer a:hover {\n text-decoration: underline;\n}\n\n@media (max-width: 768px) {\n .message {\n max-width: 90%;\n }\n \n .chat-header h1 {\n font-size: 1.2rem;\n }\n \n .settings-button {\n padding: 6px 10px;\n font-size: 0.8rem;\n }\n}\n`;","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n// Global blocklist definition\nconst BLOCKLIST = [\n \"google-analytics.com\",\n \"doubleclick.net\",\n \"ads.example.com\",\n];\n\n// Main App component\nfunction App() {\n const [messages, setMessages] = useState([]);\n const [input, setInput] = useState(\"\");\n const [urls, setUrls] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [showUrlSettings, setShowUrlSettings] = useState(false);\n const chatContainerRef = useRef(null);\n const messageInputRef = useRef(null);\n\n useEffect(() => {\n // Load configuration on mount\n fetchConfig();\n }, []);\n\n useEffect(() => {\n // Scroll to bottom on new messages\n if (chatContainerRef.current) {\n chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;\n }\n }, [messages]);\n\n const fetchConfig = async () => {\n try {\n const response = await fetch(\"/api/config\");\n if (response.ok) {\n const config = await response.json();\n setUrls(config.urls || []);\n }\n } catch (error) {\n console.error(\"Failed to fetch configuration:\", error);\n }\n };\n\n const saveUrls = async () => {\n setIsLoading(true);\n try {\n const response = await fetch(\"/api/save-urls\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ urls }),\n });\n\n if (response.ok) {\n setShowUrlSettings(false);\n setMessages(\n prev => [...prev, {\n role: \"system\",\n content: \"URLが保存され、コンテキストが更新されます。スクレイピングを開始します...\",\n }]\n );\n\n // Initialize context after saving URLs\n const initResponse = await fetch(\"/api/initialize-context\");\n if (initResponse.ok) {\n const result = await initResponse.json();\n if (result.success) {\n setMessages(\n prev => [...prev, {\n role: \"system\",\n content: \"コンテキストの読み込みが完了しました。スクレイピングされたサイト: \"\n + result.scrapedUrls.join(\", \"),\n }]\n );\n } else {\n setMessages(prev => [...prev, { role: \"system\", content: `エラー: ${result.error}` }]);\n }\n }\n } else {\n throw new Error(\"Failed to save URLs\");\n }\n } catch (error) {\n console.error(\"Error saving URLs:\", error);\n setMessages(prev => [...prev, { role: \"system\", content: `エラー: ${error.message}` }]);\n } finally {\n setIsLoading(false);\n }\n };\n\n const sendMessage = async () => {\n if (!input.trim()) return;\n\n const userMessage = input;\n setInput(\"\");\n setMessages(prev => [...prev, { role: \"user\", content: userMessage }]);\n\n setIsLoading(true);\n try {\n const response = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: userMessage }),\n });\n\n if (response.ok) {\n const result = await response.json();\n setMessages(prev => [...prev, { role: \"assistant\", content: result.response }]);\n } else {\n throw new Error(\"ChatGPT response failed\");\n }\n } catch (error) {\n console.error(\"Error sending message:\", error);\n setMessages(prev => [...prev, { role: \"system\", content: `エラー: ${error.message}` }]);\n } finally {\n setIsLoading(false);\n if (messageInputRef.current) {\n messageInputRef.current.focus();\n }\n }\n };\n\n const handleKeyPress = (e) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n sendMessage();\n }\n };\n\n return (\n

\n {showUrlSettings\n ? (\n

URL設定

URLを入力してください（1行に1つ）:

\n setUrls(e.target.value.split(\"\\n\").map(url => url.trim()).filter(url => url))}\n rows={10}\n className=\"url-textarea\"\n />\n

\n \n \n

\n )\n : (\n <>\n

GPT-4o Web Analysis Chat

\n \n

\n {messages.map((message, index) => (\n

{message.content}

\n ))}\n {isLoading && (\n

処理中...

\n )}\n

\n setInput(e.target.value)}\n onKeyPress={handleKeyPress}\n placeholder=\"メッセージを入力...\"\n rows={2}\n disabled={isLoading}\n className=\"message-input\"\n />\n \n

\n \n )}\n

\n View Source\n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}\n\n// Helper functions for server-side\nasync function handleGetConfig(key: string) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n try {\n const config = await blob.getJSON(`${key}_config`) || { urls: [] };\n return Response.json(config);\n } catch (error) {\n return Response.json({ urls: [] });\n }\n}\n\nasync function handleSaveUrls(request: Request, key: string) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n try {\n const data = await request.json();\n await blob.setJSON(`${key}_config`, { urls: data.urls });\n // Reset chat history when urls change\n await blob.setJSON(`${key}_chat_history`, { messages: [] });\n return Response.json({ success: true });\n } catch (error) {\n return Response.json({ success: false, error: error.message }, { status: 500 });\n }\n}\n\nasync function handleInitializeContext(key: string) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n\n try {\n // Get config with URLs\n const config = await blob.getJSON(`${key}_config`) || { urls: [] };\n\n if (!config.urls || config.urls.length === 0) {\n return Response.json({ success: false, error: \"No URLs configured\" });\n }\n\n // Scrape websites and build context\n const scrapedContents = [];\n const scrapedUrls = [];\n\n for (const url of config.urls) {\n try {\n const content = await scrapeWebsite(url);\n if (content) {\n scrapedContents.push({ url, content: content.text });\n scrapedUrls.push(url);\n // Random delay between requests to be nice to servers\n await new Promise(resolve => setTimeout(resolve, Math.random() * 2000 + 1000));\n }\n } catch (error) {\n console.error(`Error scraping ${url}:`, error);\n }\n }\n\n if (scrapedContents.length === 0) {\n return Response.json({\n success: false,\n error: \"スクレイピングに失敗しました。URLを確認してください。\",\n });\n }\n\n // Build context from scraped content\n const context = `\nあなたはwebサイトのコンテンツを分析する専門家です。\n以下の複数のWebサイトから抽出されたコンテンツを分析し、質問に答えてください。\n\n${scrapedContents.map(c => `---URL: ${c.url}---\\n${c.content}\\n`).join(\"\\n\")}\n`;\n\n // Save context to blob storage\n await blob.setJSON(`${key}_context`, { context, scrapedUrls });\n\n // Reset chat history\n await blob.setJSON(`${key}_chat_history`, { messages: [] });\n\n return Response.json({ success: true, scrapedUrls });\n } catch (error) {\n console.error(\"Error initializing context:\", error);\n return Response.json({ success: false, error: error.message }, { status: 500 });\n }\n}\n\nasync function handleChat(request: Request, key: string) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n\n try {\n const data = await request.json();\n const userMessage = data.message;\n\n // Get stored context and chat history\n const contextData = await blob.getJSON(`${key}_context`) || { context: \"\" };\n const historyData = await blob.getJSON(`${key}_chat_history`) || { messages: [] };\n\n // Build messages for OpenAI\n const systemMessage = {\n role: \"system\",\n content:\n \"あなたはwebサイトのコンテンツを分析する専門家です。与えられた複数のWebサイトの内容に基づいて質問に答えてください。\",\n };\n\n const historyMessages = historyData.messages.map(msg => ({\n role: msg.role,\n content: msg.content,\n }));\n\n // First message should include the full context\n let messages;\n if (historyMessages.length === 0) {\n // First message in conversation - include full context\n messages = [\n systemMessage,\n {\n role: \"user\",\n content: `${contextData.context}\\n\\n質問: ${userMessage}`,\n },\n ];\n } else {\n // Subsequent messages - use history and append new question\n messages = [\n systemMessage,\n ...historyMessages,\n {\n role: \"user\",\n content: userMessage,\n },\n ];\n }\n\n // Initialize OpenAI\n const openai = new OpenAI();\n\n // Send to OpenAI with temperature 0.1 for more deterministic responses\n const completion = await openai.chat.completions.create({\n messages,\n model: \"gpt-4o\",\n temperature: 0.1,\n });\n\n const response = completion.choices[0].message.content;\n\n // Update chat history - store only user and assistant messages\n historyData.messages.push({ role: \"user\", content: userMessage });\n historyData.messages.push({ role: \"assistant\", content: response });\n\n // Keep history from getting too large (OpenAI has context limits)\n if (historyData.messages.length > 10) {\n // Keep only the 6 most recent messages (3 exchanges)\n historyData.messages = historyData.messages.slice(-6);\n }\n\n await blob.setJSON(`${key}_chat_history`, historyData);\n\n return Response.json({ response });\n } catch (error) {\n console.error(\"Error in chat:\", error);\n return Response.json({ response: `エラーが発生しました: ${error.message}` }, { status: 500 });\n }\n}\n\n// Web scraping implementation\nasync function scrapeWebsite(url: string, retries = 3, timeout = 10000) {\n if (!url.startsWith(\"http\")) {\n url = \"https://\" + url;\n }\n\n const headers = {\n \"User-Agent\":\n \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36\",\n \"Accept\":\n \"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7\",\n \"Accept-Language\": \"ja,en-US;q=0.9,en;q=0.8\",\n };\n\n // Check if URL is in blocklist\n if (isBlocklisted(url)) {\n console.warn(`ブロックリストにあるURLをスキップ: ${url}`);\n return null;\n }\n\n // Try to scrape with retries\n for (let attempt = 0; attempt < retries; attempt++) {\n try {\n console.log(`(${attempt + 1}/${retries}) ${url} のスクレイピングを試行中...`);\n\n // Use fetch API with timeout\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), timeout);\n\n const response = await fetch(url, {\n method: \"GET\",\n headers,\n signal: controller.signal,\n });\n\n clearTimeout(timeoutId);\n\n if (!response.ok) {\n throw new Error(`HTTP error ${response.status}: ${response.statusText}`);\n }\n\n const html = await response.text();\n\n // Simple text extraction - we're server-side so we don't have DOM\n // Extract text by removing HTML tags\n const text = html\n .replace(/)<[^<]*)*<\\/script>/gi, \"\")\n .replace(/)<[^<]*)*<\\/style>/gi, \"\")\n .replace(/)<[^<]*)*<\\/head>/gi, \"\")\n .replace(/)<[^<]*)*<\\/iframe>/gi, \"\")\n .replace(/)<[^<]*)*<\\/noscript>/gi, \"\")\n .replace(/)<[^<]*)*<\\/footer>/gi, \"\")\n .replace(/)<[^<]*)*<\\/header>/gi, \"\")\n .replace(/<[^>]+>/g, \" \")\n .replace(/\\s+/g, \" \")\n .trim();\n\n // Find all links using a simple regex\n const linkRegex = /]+href=[\"']([^\"']+)[\"'][^>]*>/g;\n const links = [];\n let match;\n\n while ((match = linkRegex.exec(html)) !== null) {\n if (match[1] && !match[1].startsWith(\"javascript:\")) {\n const normalizedLink = normalizeUrl(url, match[1]);\n if (normalizedLink) {\n links.push(normalizedLink);\n }\n }\n }\n\n return {\n text: text.substring(0, 50000), // Limit text size to prevent issues\n links,\n };\n } catch (error) {\n console.error(`${url} - Error: ${error.message} (attempt ${attempt + 1}/${retries})`);\n\n if (attempt < retries - 1) {\n // Exponential backoff with jitter\n const waitTime = Math.random() * 3000 + 3000 * Math.pow(2, attempt);\n console.log(`${url} - Waiting ${waitTime.toFixed(2)}ms before retrying...`);\n await new Promise(resolve => setTimeout(resolve, waitTime));\n } else {\n console.error(`${url} - Failed to scrape (max retries reached)`);\n return null;\n }\n }\n }\n\n return null;\n}\n\n// Helper functions for web scraping\nfunction isBlocklisted(url: string): boolean {\n try {\n const parsedUrl = new URL(url);\n const hostname = parsedUrl.hostname;\n return BLOCKLIST.some(blockedDomain => hostname.includes(blockedDomain));\n } catch {\n return false;\n }\n}\n\nfunction normalizeUrl(baseUrl: string, relativeUrl: string): string {\n try {\n // Handle relative URLs\n let absoluteUrl;\n if (relativeUrl.startsWith(\"http\")) {\n absoluteUrl = relativeUrl;\n } else if (relativeUrl.startsWith(\"//\")) {\n // Protocol-relative URL\n const baseUrlProtocol = new URL(baseUrl).protocol;\n absoluteUrl = `${baseUrlProtocol}${relativeUrl}`;\n } else if (relativeUrl.startsWith(\"/\")) {\n // Root-relative URL\n const baseUrlObj = new URL(baseUrl);\n absoluteUrl = `${baseUrlObj.protocol}//${baseUrlObj.host}${relativeUrl}`;\n } else {\n // Relative to current path\n absoluteUrl = new URL(relativeUrl, baseUrl).href;\n }\n\n // Remove query params and hash fragments\n const parsedUrl = new URL(absoluteUrl);\n parsedUrl.search = \"\";\n parsedUrl.hash = \"\";\n return parsedUrl.toString();\n } catch {\n return \"\";\n }\n}\n\n// Styles\nconst css = `\n:root {\n --bg-color: #f5f5f5;\n --chat-bg: #ffffff;\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --user-message-bg: #e8f4fd;\n --assistant-message-bg: #f0f0f0;\n --system-message-bg: #ffe8e8;\n --border-color: #ddd;\n --text-color: #333;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--bg-color);\n height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.app-container {\n max-width: 100%;\n width: 100%;\n height: 100vh;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n background-color: var(--chat-bg);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\n.chat-header {\n padding: 15px 20px;\n background-color: var(--primary-color);\n color: white;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid var(--border-color);\n}\n\n.chat-header h1 {\n font-size: 1.5rem;\n margin: 0;\n}\n\n.settings-button {\n background-color: var(--secondary-color);\n color: white;\n border: none;\n padding: 8px 15px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 0.9rem;\n}\n\n.settings-button:hover {\n background-color: #2980b9;\n}\n\n.chat-container {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 15px;\n}\n\n.message {\n padding: 12px 15px;\n border-radius: 8px;\n max-width: 85%;\n position: relative;\n}\n\n.message.user {\n align-self: flex-end;\n background-color: var(--user-message-bg);\n border-bottom-right-radius: 2px;\n}\n\n.message.assistant {\n align-self: flex-start;\n background-color: var(--assistant-message-bg);\n border-bottom-left-radius: 2px;\n}\n\n.message.system {\n align-self: center;\n background-color: var(--system-message-bg);\n font-style: italic;\n max-width: 90%;\n}\n\n.message-content {\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.loading:after {\n content: \"...\";\n animation: dots 1.5s infinite;\n display: inline-block;\n width: 20px;\n text-align: left;\n}\n\n@keyframes dots {\n 0%, 20% { content: \".\"; }\n 40% { content: \"..\"; }\n 60%, 100% { content: \"...\"; }\n}\n\n.input-container {\n display: flex;\n padding: 15px;\n border-top: 1px solid var(--border-color);\n background-color: white;\n}\n\n.message-input {\n flex: 1;\n padding: 12px;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n resize: none;\n font-family: inherit;\n font-size: 1rem;\n}\n\n.send-button {\n background-color: var(--secondary-color);\n color: white;\n border: none;\n padding: 0 20px;\n margin-left: 10px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 1rem;\n}\n\n.send-button:hover {\n background-color: #2980b9;\n}\n\n.send-button:disabled {\n background-color: #ccc;\n cursor: not-allowed;\n}\n\n.settings-container {\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 15px;\n height: 100%;\n}\n\n.settings-container h2 {\n color: var(--primary-color);\n margin-bottom: 10px;\n}\n\n.url-textarea {\n width: 100%;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n font-family: inherit;\n font-size: 1rem;\n min-height: 200px;\n}\n\n.button-container {\n display: flex;\n gap: 10px;\n margin-top: 20px;\n}\n\n.save-button, .cancel-button {\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 1rem;\n}\n\n.save-button {\n background-color: var(--secondary-color);\n color: white;\n}\n\n.save-button:hover {\n background-color: #2980b9;\n}\n\n.cancel-button {\n background-color: #e74c3c;\n color: white;\n}\n\n.cancel-button:hover {\n background-color: #c0392b;\n}\n\n.footer {\n padding: 10px;\n text-align: center;\n font-size: 0.8rem;\n border-top: 1px solid var(--border-color);\n}\n\n.footer a {\n color: var(--secondary-color);\n text-decoration: none;\n}\n\n.footer a:hover {\n text-decoration: underline;\n}\n\n@media (max-width: 768px) {\n .message {\n max-width: 90%;\n }\n \n .chat-header h1 {\n font-size: 1.2rem;\n }\n \n .settings-button {\n padding: 6px 10px;\n font-size: 0.8rem;\n }\n}\n`;","createdAt",["D",1741330834411],"branchVersion","branchId","bd20ba14-2825-11f0-af78-569c3dd06744","id","bd207554-2825-11f0-af78-569c3dd06744","sclaping_chat",["D",1746280300039],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","fc0bd9ca-263d-48ce-84f0-30b4a2ea6082","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","fc71265b-929d-440a-aa31-727271a3da69","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":55,"_98":99,"_100":25},"branch",{"_13":14,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","tsuchi_ya","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycVRJUVhlbWlxQ1ZNUnJVcWpHQ1dWNGEwcU0ifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":159,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":160,"_79":161,"_81":162,"_83":25},"tree",[150,151],"files",[150,151],"counts",{"_140":61,"_141":136,"_142":61,"_143":144,"_145":146},"contents",[124,125],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":133,"_32":134,"_30":135,"_127":-5,"_41":42,"_40":136,"_128":49,"_38":137,"_13":61,"_33":20,"_35":138,"_24":25,"_131":-5,"_27":139},{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":49,"_38":129,"_13":130,"_33":34,"_35":37,"_24":25,"_131":-5,"_27":132},"bd31a07c-2825-11f0-af78-569c3dd06744","parentId","latest",["D",1741330834411],2,"label",[28],"bd2304d6-2825-11f0-af78-569c3dd06744","README.md","bd230558-2825-11f0-af78-569c3dd06744",1,["D",1741329684501],"Migrated from folder: crowler/glowingGoldHawk",[134],"pulls","branches","forks","envVars",{"_147":61,"_149":61},"connections",{"_147":61,"_148":61},"count","unfilledCount","emptyCount",{"_43":133,"_32":134,"_30":135,"_127":-5,"_41":42,"_40":136,"_128":49,"_38":156,"_13":61,"_33":20,"_35":138,"_24":25,"_131":-5,"_153":157,"_27":158},{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":49,"_38":152,"_13":130,"_33":34,"_35":37,"_24":25,"_131":-5,"_153":154,"_27":155},["D",1741330834411],"children",[],[28],["D",1741329684501],[],[134],["D",1746280300039],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":55,"_98":99,"_100":25},{"_13":14,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"ctx",{"_77":-5,"_121":196,"_197":198,"_199":200,"_201":25,"_202":25,"_203":25,"_204":49,"_205":-5,"_206":-7,"_207":-7,"_208":61,"_209":25,"_210":25,"_211":-5,"_212":25,"_213":25,"_214":25,"_215":-5},"ENV",{"_167":168,"_169":170,"_171":84,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v3