function FlexibleMessageContainer({ isUser, message }) { return /*#__PURE__*/ React.createElement("div", { className: `flex ${isUser ? 'justify-end' : 'justify-start'}`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, !isUser && /*#__PURE__*/ React.createElement("span", { className: "text-[#ffffff] mt-2 mr-2 font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 19 }, __self: this }, "BOT"), /*#__PURE__*/ React.createElement("div", { className: `max-w-[60%] ${!isUser ? 'flex items-center' : ''}`, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `p-3 rounded-lg text-white ${isUser ? 'bg-[#1d4ed8]' : 'bg-[#333333]'}`, __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, message.content.includes('http') && message.role === 'system' ? /*#__PURE__*/ React.createElement("span", { className: "font-roboto break-words", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: message.content.match(/https?:\/\/\S+/)[0], target: "_blank", rel: "noopener noreferrer", className: "text-[#0a84ff]", __source: { fileName: "", lineNumber: 8, columnNumber: 55 }, __self: this }, message.content.match(/https?:\/\/\S+/)[0]), message.content.replace(/https?:\/\/\S+/, '')) : /*#__PURE__*/ React.createElement("span", { className: "font-roboto break-words", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, message.content)))); } function FlexibleMessageContainerStory() { const message1 = { content: "This is a message from the user.", role: "user" }; const message2 = { content: "This is a message from the bot. Check this link: http://example.com", role: "system" }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FlexibleMessageContainer, { isUser: true, message: message1, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(FlexibleMessageContainer, { isUser: false, message: message2, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function MessageTransmissionInterface({ isLoading, inputValue, setInputValue, sendMessage }) { return /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 inset-x-0 p-4 bg-[#222222]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", maxLength: "50", className: `flex-1 p-2 rounded-md ${isLoading ? 'bg-[#555555] text-[#999999]' : 'bg-[#333333] text-white'}`, value: inputValue, onChange: (e)=>setInputValue(e.target.value), name: "messageInput", disabled: isLoading, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: `rounded-md px-4 ${isLoading ? 'bg-[#555555] text-[#999999]' : 'bg-[#2563eb] text-white'}`, onClick: sendMessage, disabled: isLoading, __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "送信"))); } function MessageTransmissionInterfaceStory() { const [isLoading, setIsLoading] = React.useState(false); const [inputValue, setInputValue] = React.useState(''); const sendMessage = ()=>{ setIsLoading(true); // Simulate message send setTimeout(()=>{ setInputValue(''); // Clear input after sending setIsLoading(false); // Reset loading state }, 2000); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MessageTransmissionInterface, { isLoading: isLoading, inputValue: inputValue, setInputValue: setInputValue, sendMessage: sendMessage, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this })); } function MainComponent() { const [messages, setMessages] = React.useState([ { role: 'assistant', content: 'こんにちは。どんなご用件でしょうか' } ]); const [inputValue, setInputValue] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const scrollToBottom = ()=>{ window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' }); }; React.useEffect(()=>{ scrollToBottom(); }, [ messages ]); React.useEffect(()=>{ const scriptTag = document.createElement('script'); scriptTag.async = true; scriptTag.src = `https://www.googletagmanager.com/gtag/js?id=G-ZNM74Q0SDL`; document.head.appendChild(scriptTag); window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-ZNM74Q0SDL'); }, []); const fetchClaudeResponse = async (messageContent)=>{ const response = await fetch('/integrations/anthropic-claude/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: messageContent } ] }) }); if (!response.ok) throw new Error('Failed to fetch Claude response'); const data = await response.json(); return data.choices[0].message.content; }; const fetchGoogleSearch = async (query)=>{ const response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(query)}`, { method: 'GET' }); if (!response.ok) throw new Error('Failed to fetch Google search results'); const data = await response.json(); return data.items.map((item)=>`${item.title}: ${item.snippet}`).join(", ").substr(0, 300); }; const handleSendMessage = async ()=>{ if (inputValue.trim() === '') return; setIsLoading(true); const userMessage = { role: 'user', content: inputValue }; setMessages((prev)=>[ ...prev, userMessage ]); setInputValue(''); try { const searchResult = await fetchGoogleSearch(inputValue); const fullMessage = `${inputValue}/次はGoogleでシステムが調べた検索結果です。参考データにしてください${searchResult}`; const claudeResponse = await fetchClaudeResponse(fullMessage); setMessages((prev)=>[ ...prev, { role: 'assistant', content: claudeResponse } ]); } catch (error) { console.error('Interaction error:', error); setMessages((prev)=>[ ...prev, { role: 'assistant', content: 'エラーが発生しました。再度試してください。' } ]); } finally{ setIsLoading(false); scrollToBottom(); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-black p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2 pb-24", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement(FlexibleMessageContainer, { key: index, isUser: message.role === 'user', message: message, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement(MessageTransmissionInterface, { isLoading: isLoading, inputValue: inputValue, setInputValue: setInputValue, sendMessage: handleSendMessage, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this })); }