function MainComponent() { const [userMessage, setUserMessage] = React.useState(''); const [chatHistory, setChatHistory] = React.useState([]); const [isReplying, setIsReplying] = React.useState(false); const sendMessage = async ()=>{ if (userMessage.trim() === '') return; const newMessage = { role: 'user', content: userMessage }; setChatHistory((chatHistory)=>[ ...chatHistory, newMessage ]); setIsReplying(true); const requestBody = { messages: [ newMessage ] }; const response = await fetch('/integrations/anthropic-claude-sonnet/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(requestBody) }); const data = await response.json(); const reply = data.choices[0].message.content.replace(/\n/g, '
').replace(/\*\*(.*?)\*\*/g, '$1').replace(/\[(.*?)\]$(.*?)$/g, '$1'); setChatHistory((chatHistory)=>[ ...chatHistory, { role: 'assistant', content: reply } ]); setIsReplying(false); setUserMessage(''); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white min-h-screen p-6", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-[#0A84FF] font-bold text-center mb-6 font-crimson-text", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Salesforceなんでも聞いて"), /*#__PURE__*/ React.createElement("img", { src: "chat-bot-character.png", alt: "チャットボットのキャラクター", className: "w-[100px] h-[100px] absolute top-5 right-5", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 h-[calc(100vh-4rem)] flex flex-col", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto", style: { maxHeight: 'calc(100vh - 16rem)' }, __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, chatHistory.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: `${message.role}-${index}`, className: `flex items-end ${message.role === 'user' ? 'justify-start' : 'justify-end'} my-2`, __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[70%] min-w-[10%] break-words rounded-xl px-4 py-2 mb-2 shadow-inner ${message.role === 'user' ? 'bg-[#DDF4FF] text-[#000]' : 'bg-[#BBDEFB] text-[#000]'}`, dangerouslySetInnerHTML: { __html: message.content }, __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }))), isReplying && /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-xl px-4 py-2 bg-[#0A84FF] text-white animate-pulse", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, "回答作成中・・・"))), /*#__PURE__*/ React.createElement("div", { className: "mt-auto", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userMessage", value: userMessage, onChange: (e)=>setUserMessage(e.target.value), className: "w-full border rounded-lg p-2 text-sm font-roboto", placeholder: "質問をここに入力", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, className: "bg-[#0A84FF] text-white rounded-lg px-6 py-2 text-sm font-semibold font-roboto", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "送信"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .animate-pulse { animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; } `)); }