function RobotoTextContainer({ text, isUser, icon = "fas fa-times-circle", fontSize = "text-base" }) { return /*#__PURE__*/ React.createElement(TextContainerDesign, { icon: icon, text: text, isUser: isUser, fontSize: fontSize, __source: { fileName: "", lineNumber: 3, columnNumber: 9 }, __self: this }); } function RobotoTextContainerStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 font-roboto", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(RobotoTextContainer, { text: "You", isUser: true, fontSize: "text-xl", icon: "fas fa-user", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(RobotoTextContainer, { text: "こんばんは", isUser: true, fontSize: "text-lg", icon: "fas fa-comment-alt", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(RobotoTextContainer, { text: "ChatGPT", isUser: false, fontSize: "text-xl", icon: "fas fa-robot", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(RobotoTextContainer, { text: "こんばんは！何かお手伝いできることはありますか？", isUser: false, fontSize: "text-lg", icon: "fas fa-comment-alt", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this })); } function ChatGptHeaderBar({ title, version, menuOpen, onMenuClick }) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-4 bg-white shadow border-b border-gray-300", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-xl", onClick: onMenuClick, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, menuOpen ? "✖️" : "☰"), /*#__PURE__*/ React.createElement("span", { className: "font-bold text-lg text-gray-900", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, `${title} ${version}`), /*#__PURE__*/ React.createElement("button", { className: "text-lg", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-pencil-alt", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }))); } function ChatGptHeaderBarStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatGptHeaderBar, { title: "ChatGPT", version: "4", menuOpen: false, onMenuClick: ()=>{}, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChatGptHeaderBar, { title: "ChatGPT", version: "4", menuOpen: true, onMenuClick: ()=>{}, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function TextContainerDesign({ icon, text, isUser, fontSize = "text-base" }) { const containerStyles = "flex items-center bg-[#f3f3f3] p-4 rounded-lg"; const iconStyle = `${icon} mr-2`; const textStyles = `${fontSize} ${isUser ? "text-pink-500" : "text-blue-500"}`; return /*#__PURE__*/ React.createElement("div", { className: containerStyles, __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: iconStyle, __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: textStyles, __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, text)); } function TextContainerDesignStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TextContainerDesign, { icon: "fas fa-user", text: "Sample user text.", isUser: true, fontSize: "text-lg", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(TextContainerDesign, { icon: "fas fa-robot", text: "Sample AI response.", isUser: false, fontSize: "text-sm", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function FormAndSubmitButtonDesign({ handleSubmit, inputValue, setInputValue, placeholder, icon, alertMessage }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4 bg-white border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, icon && /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center w-10 h-10 bg-gray-200 rounded-full text-gray-500", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${icon} fa-lg`, __source: { fileName: "", lineNumber: 8, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "text", value: inputValue, onChange: (e)=>setInputValue(e.target.value), name: "messageInput", placeholder: placeholder, className: "flex-1 p-2 mx-2 border rounded border-gray-300 focus:outline-none", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-gray-200 rounded-full", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane text-gray-500", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })))), alertMessage && /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-2 text-sm text-gray-500", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-1", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, alertMessage))); } function FormAndSubmitButtonDesignStory() { const [inputText, setInputText] = React.useState(""); const handleInputSubmit = (e)=>{ e.preventDefault(); alert(`Input Submitted: ${inputText}`); setInputText(""); // Reset input after submit }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FormAndSubmitButtonDesign, { handleSubmit: handleInputSubmit, inputValue: inputText, setInputValue: setInputText, placeholder: "Message ChatGPT...", icon: "fas fa-envelope", alertMessage: "Ambitious AI workspace chats aren't used to train our models. ChatGPT can make mistakes.", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this })); } function MainComponent() { const [messages, setMessages] = React.useState([ { role: "user", content: "こんばんは" }, { role: "assistant", content: "" } // Placeholder to update with assistant response ]); const [inputText, setInputText] = React.useState(''); const [menuOpen, setMenuOpen] = React.useState(false); const [loading, setLoading] = React.useState(false); const fetchResponse = async (messageContent)=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: messageContent } ], system_prompt: "Reply to this message" }) }); const data = await response.json(); const botContent = data.choices[0].message.content; setMessages((prevMessages)=>[ ...prevMessages, { role: "assistant", content: botContent } ]); } catch (error) { // Handle error appropriately in your application setMessages((prevMessages)=>[ ...prevMessages, { role: "assistant", content: "There was an error with the response." } ]); } finally{ setLoading(false); } }; const handleInputSubmit = (e)=>{ e.preventDefault(); if (inputText.trim()) { setMessages((prevMessages)=>[ ...prevMessages, { role: "user", content: inputText } ]); fetchResponse(inputText); setInputText(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-[#FAFAFA]", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatGptHeaderBar, { title: "ChatGPT", version: "4", menuOpen: menuOpen, onMenuClick: ()=>setMenuOpen(!menuOpen), __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-auto px-4 py-2 space-y-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement(RobotoTextContainer, { key: index, text: message.content, isUser: message.role === 'user', icon: message.role === 'user' ? "fas fa-user" : "fas fa-robot", fontSize: "text-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this })), loading && /*#__PURE__*/ React.createElement(RobotoTextContainer, { text: "Thinking...", isUser: false, icon: "fas fa-spinner", fontSize: "text-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(FormAndSubmitButtonDesign, { handleSubmit: handleInputSubmit, inputValue: inputText, setInputValue: setInputText, placeholder: "メッセージを入力...", icon: "fas fa-envelope", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }))); }