function ComparisonTable({ cars = [] }) { const features = [ "メーカー", "モデル", "年式", "価格", "燃費", "エンジン", "定員", "トランスミッション" ]; return /*#__PURE__*/ React.createElement("div", { className: "w-full overflow-x-auto p-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-4 border bg-gray-100", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }), [ 0, 1, 2 ].map((index)=>/*#__PURE__*/ React.createElement("th", { key: index, className: "p-4 border bg-gray-100 w-1/4", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, cars[index] ? /*#__PURE__*/ React.createElement("div", { className: "text-lg font-semibold text-center", __source: { fileName: "", lineNumber: 22, columnNumber: 19 }, __self: this }, cars[index].maker, " ", cars[index].model) : /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-center", __source: { fileName: "", lineNumber: 26, columnNumber: 19 }, __self: this }, "車を選択"))))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, features.map((feature)=>/*#__PURE__*/ React.createElement("tr", { key: feature, __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-4 border font-medium bg-gray-50", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, feature), [ 0, 1, 2 ].map((index)=>/*#__PURE__*/ React.createElement("td", { key: index, className: "p-4 border text-center", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, cars[index]?.[feature.toLowerCase()] || "-"))))))); } function ComparisonTableStory() { const sampleCars = [ { maker: "トヨタ", model: "カムリ", 年式: "2024", 価格: "3,500,000円", 燃費: "15.4km/L", エンジン: "2.5L 4気筒", 定員: "5人", トランスミッション: "CVT" }, { maker: "ホンダ", model: "アコード", 年式: "2024", 価格: "3,800,000円", 燃費: "14.8km/L", エンジン: "2.0L 4気筒", 定員: "5人", トランスミッション: "10速AT" }, { maker: "日産", model: "スカイライン", 年式: "2024", 価格: "4,200,000円", 燃費: "13.6km/L", エンジン: "3.0L V6", 定員: "5人", トランスミッション: "7速AT" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 84, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ComparisonTable, { cars: sampleCars, __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ComparisonTable, { cars: [ sampleCars[0] ], __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ComparisonTable, { cars: [], __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }))); } function CarCard({ name, type, price, efficiency, onCompare }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 max-w-sm", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl font-bold mb-3", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, name), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-gray-600", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "タイプ:"), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, type)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-gray-600", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "価格:"), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "¥", price.toLocaleString())), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-gray-600", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "燃費:"), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, efficiency, "km/L"))), /*#__PURE__*/ React.createElement("button", { onClick: onCompare, className: "mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-roboto py-2 px-4 rounded-md transition-colors", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, "比較する")); } function CarCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CarCard, { name: "トヨタカローラ", type: "セダン", price: 2500000, efficiency: 25.6, onCompare: ()=>alert("比較機能がクリックされました"), __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CarCard, { name: "ホンダフィット", type: "ハッチバック", price: 1980000, efficiency: 27.2, onCompare: ()=>alert("比較機能がクリックされました"), __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this })); } function ChatMessage({ message, isBot, timestamp }) { const messageClasses = isBot ? "bg-[#E3F2FD] rounded-tr-2xl rounded-tl-2xl rounded-br-2xl" : "bg-[#E8F5E9] rounded-tr-2xl rounded-tl-2xl rounded-bl-2xl ml-auto"; return /*#__PURE__*/ React.createElement("div", { className: `max-w-[70%] p-4 mb-4 ${messageClasses}`, __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#333333]", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, message), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#666666] mt-2 block", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, timestamp)); } function ChatMessageStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white w-full max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatMessage, { message: "こんにちは！何かお手伝いできることはありますか？", isBot: true, timestamp: "14:22", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChatMessage, { message: "はい、ウェブサイトの作成について質問があります。", isBot: false, timestamp: "14:23", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChatMessage, { message: "承知しました。具体的にどのようなことでしょうか？", isBot: true, timestamp: "14:24", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this })); } function MainComponent() { const [messages, setMessages] = useState([]); const [inputText, setInputText] = useState(""); const [searchResults, setSearchResults] = useState([]); const [comparisonResults, setComparisonResults] = useState(null); const [streamingMessage, setStreamingMessage] = useState(""); const chatContainerRef = useRef(null); const scrollToBottom = useCallback(()=>{ if (chatContainerRef.current) { chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight; } }, []); useEffect(()=>{ scrollToBottom(); }, [ messages, streamingMessage, scrollToBottom ]); const handleFinish = useCallback((message)=>{ setMessages((prev)=>[ ...prev, { text: message, isUser: false } ]); setStreamingMessage(""); }, []); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: handleFinish }); const handleSubmit = async (e)=>{ e.preventDefault(); if (!inputText.trim()) return; const userMessage = { text: inputText, isUser: true }; setMessages((prev)=>[ ...prev, userMessage ]); setInputText(""); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "あなたは自動車のアドバイザーです。車に関する質問に答えてください。" }, { role: "user", content: inputText } ], stream: true }) }); handleStreamResponse(response); const searchResponse = await fetch("/api/search-cars", { method: "POST", body: JSON.stringify({ query: inputText }) }); const searchData = await searchResponse.json(); setSearchResults(searchData?.matches || []); const compareResponse = await fetch("/api/compare-cars", { method: "POST", body: JSON.stringify({ cars: searchData?.matches?.slice(0, 3) || [] }) }); const compareData = await compareResponse.json(); setComparisonResults(compareData?.comparison); } catch (error) { setMessages((prev)=>[ ...prev, { text: "エラーが発生しました。", isUser: false } ]); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-gray-100", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full md:w-2/3 p-4", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { ref: chatContainerRef, className: "flex-1 overflow-y-auto mb-4 bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement(ChatMessage, { key: index, message: message.text, isBot: !message.isUser, timestamp: new Date().toLocaleTimeString(), __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this })), streamingMessage && /*#__PURE__*/ React.createElement(ChatMessage, { message: streamingMessage, isBot: true, timestamp: new Date().toLocaleTimeString(), __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex gap-2", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputText, onChange: (e)=>setInputText(e.target.value), className: "flex-1 p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400", placeholder: "メッセージを入力してください...", name: "message", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, "送信"))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex flex-col w-1/3 p-4 gap-4", __source: { fileName: "", lineNumber: 123, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4 flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg mb-4", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, "検索結果"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, searchResults.map((car, index)=>/*#__PURE__*/ React.createElement(CarCard, { key: index, name: car.name, type: car.type, price: car.price, efficiency: car.efficiency, onCompare: ()=>{}, __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4 flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg mb-4", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, "比較結果"), comparisonResults && /*#__PURE__*/ React.createElement(ComparisonTable, { cars: comparisonResults, __source: { fileName: "", lineNumber: 142, columnNumber: 33 }, __self: this })))); }