function ChatInterface({ messages = [], onSendMessage, loading, quickReplies = [], onQuickReplyClick }) { const [inputText, setInputText] = useState(""); const handleSubmit = (e)=>{ e.preventDefault(); if (inputText.trim()) { onSendMessage(inputText); setInputText(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-[600px] w-full max-w-2xl mx-auto bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.isUser ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[70%] rounded-lg p-3 ${message.isUser ? "bg-[#007AFF] text-white" : "bg-[#F0F0F0] text-black"}`, __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, message.text))), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#F0F0F0] rounded-lg p-3 flex space-x-2", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-gray-500 rounded-full animate-bounce", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-gray-500 rounded-full animate-bounce delay-100", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-gray-500 rounded-full animate-bounce delay-200", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-2", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, quickReplies.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, quickReplies.map((reply, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>onQuickReplyClick(reply), className: "bg-[#F0F0F0] hover:bg-[#E0E0E0] text-black px-4 py-2 rounded-full text-sm", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, reply))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex gap-2", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "message", type: "text", value: inputText, onChange: (e)=>setInputText(e.target.value), className: "flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:border-[#007AFF]", placeholder: "メッセージを入力...", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: !inputText.trim(), className: "bg-[#007AFF] hover:bg-[#0056B3] text-white px-6 py-2 rounded-full disabled:opacity-50", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "送信")))); } function ChatInterfaceStory() { const [messages, setMessages] = useState([ { text: "こんにちは！", isUser: false }, { text: "お元気ですか？", isUser: true }, { text: "はい、元気です！", isUser: false } ]); const [loading, setLoading] = useState(false); const quickReplies = [ "はい", "いいえ", "ありがとう", "また今度" ]; const handleSendMessage = (text)=>{ setMessages([ ...messages, { text, isUser: true } ]); setLoading(true); setTimeout(()=>{ setMessages((prev)=>[ ...prev, { text: "デモ応答です", isUser: false } ]); setLoading(false); }, 1000); }; const handleQuickReply = (reply)=>{ handleSendMessage(reply); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 104, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatInterface, { messages: messages, onSendMessage: handleSendMessage, loading: loading, quickReplies: quickReplies, onQuickReplyClick: handleQuickReply, __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this })); } function SearchResults() { const [results, setResults] = useState([ { id: 1, from: "渋谷", to: "池袋", time: "25分", fare: "200円", transfers: [ { station: "新宿", line: "JR山手線" } ], status: "通常運転" } ]); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl mx-auto p-4 font-noto-sans", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, results.map((route)=>/*#__PURE__*/ React.createElement("div", { key: route.id, className: "bg-white rounded-lg shadow-md p-4 mb-4", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-3", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, route.from, " → ", route.to), /*#__PURE__*/ React.createElement("div", { className: "text-sm bg-green-100 text-green-800 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, route.status)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-sm text-gray-600 mb-3", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "所要時間: ", route.time), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "運賃: ", route.fare)), route.transfers.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "border-t pt-2", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-bold mb-1", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "乗り換え"), route.transfers.map((transfer, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-sm text-gray-600 flex items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exchange-alt mr-2", __source: { fileName: "", lineNumber: 40, columnNumber: 19 }, __self: this }), transfer.station, "（", transfer.line, "）")))))); } function SearchResultsStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SearchResults, { __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this })); } function TrainInfoCard({ lineName, lineColor, destination, scheduledTime, platform, delayMinutes }) { const isDelayed = delayMinutes > 0; return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg border border-gray-200 shadow-sm p-4 max-w-sm", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-3", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-3 h-3 rounded-full", style: { backgroundColor: lineColor }, __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-bold text-lg font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, lineName)), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "行先"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, destination)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "時刻"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, scheduledTime)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "プラットフォーム"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, platform)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "遅延状況"), /*#__PURE__*/ React.createElement("span", { className: isDelayed ? "text-red-500" : "text-green-500", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, isDelayed ? `${delayMinutes}分遅れ` : "定刻通り")))); } function TrainInfoCardStory() { const examples = [ { lineName: "山手線", lineColor: "#9ACD32", destination: "渋谷", scheduledTime: "12:30", platform: "2", delayMinutes: 0 }, { lineName: "中央線", lineColor: "#FF4500", destination: "新宿", scheduledTime: "13:15", platform: "4", delayMinutes: 5 } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, examples.map((props, index)=>/*#__PURE__*/ React.createElement(TrainInfoCard, { key: index, ...props, __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [language, setLanguage] = useState("ja"); const content = { ja: { welcome: "ようこそ！", quickStartTitle: "クイックスタートガイド", steps: [ "右上の言語を選択", "チャットインターフェースに質問を入力", "会話を開始" ] }, en: { welcome: "Welcome!", quickStartTitle: "Quick Start Guide", steps: [ "Select language in top right", "Type your question in chat interface", "Start conversation" ] } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#f0f4f8] to-[#d1e3f8] p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: language, onChange: (e)=>setLanguage(e.target.value), className: "p-2 rounded-lg border border-[#e0e7ff] bg-white", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "ja", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "🇯🇵 日本語"), /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "🇬🇧 English"))), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-roboto text-center text-[#1a365d] mb-8", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, content[language].welcome), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-6 shadow-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-[#2d3748] mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, content[language].quickStartTitle), /*#__PURE__*/ React.createElement("ul", { className: "space-y-3", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, content[language].steps.map((step, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center text-[#4a5568]", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2 text-[#4299e1]", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this })), step)))))); }