function MainComponent() { const [goal, setGoal] = React.useState(""); const [promptTemplate, setPromptTemplate] = React.useState(""); const [variables, setVariables] = React.useState([]); const [variableValues, setVariableValues] = React.useState({}); const [isLoading, setIsLoading] = React.useState(false); const [finalPrompt, setFinalPrompt] = React.useState(""); const [results, setResults] = React.useState([]); const [feedback, setFeedback] = React.useState(""); const [currentPage, setCurrentPage] = React.useState(1); const generatePrompt = async ()=>{ setIsLoading(true); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "F(Achieve goal for Using step-back question)=A to Z=∫F(step)=Result" }, { role: "system", content: 'User Inputより変数となる要素をかららず抽出して変数を次のように定義すること。変数は必ず、必ず{{変数}}の形で書くこと。必ずです。F(Achieve goal for Using step-back question)=A to Z=∫F(step)=Resul/Generate a prompt template for the following goal: ${goal}\n Ex.\n [Goal]: Make sure to understand the intent of User Input, define it as a Project, and execute the tasks to create the deliverables. Intermediate products generated in the process of executing each task should be connected by referring to the following EntityRelation related mappings.\nMapping\n{EntityRelation Mapping Prompt:.\n[project structure ($N1)] [consists of the following ($H, $N1, $N2)] [elements ($N2)] [such as ($H, $N1, $N2)].\n[Process ($N3)], [Step ($N4)], [Task ($N5)], [Subtask ($N6)], [Work ($N7)], [Input Information ($N8)], [Index ($N9)], [Processing Prompt ($N10)], [Intermediate Product ($N11)], [Relationship ($N12 )], [status ($N13)], [processing time ($N14)], [includes ($L, $N2, $N3; $L, $N2, $N4; $L, $N2, $N5; $L, $N2, $N6; $L, $N2, $N7; $L, $N2, $N8; $L, $N2, $N9; $L, $N2, $N10; $L, $ N2, $N11; $L, $N2, $N12; $L, $N2, $N13; $L, $N2, $N14)].\n[these components ($N2)] [are ($H, $N2, $N15)] [associated ($N15)] [with each other ($H, $N2, $N15)] [and ($H, $N2, $N15)] [as the project progresses ($N16)] [as ($L, $N16, $N17)] [information ($N17)] [flows ($L, $N17, $N18 )] [flows ($N18)].\n[e.g. ($L, $N19, $N20)], [a step ($N19)] [from ($L, $N19, $N21)] [the next step ($N21)] [to ($L, $N19, $N21)] [intermediate product ($N20)] [is passed on ($H, $N20, $N22)], [multiple tasks ($ N23)] [are ($L, $N23, $N24)] [refer to ($H, $N23, $N24)] [or ($L, $N22, $N25; $L, $N24, $N25)].\n[to facilitate the project ($H, $N26, $N27)], [the relationships among these elements ($N26)] [to properly ($H, $N27, $N28)] [define ($N28)] [and ($H, $N27, $N28)], [to manage ($N27)] [to be ($H, $N27, $N 29)] [is ($H, $N27, $N29)]\n}\nプロジェクトは各種コンバーチブルエージェント[ConversableAgent]により進行されるべきであるこのエージェントたちによりこのプロジェクトは全てが実行される.判断が必要なプロセスにおいてはユーザープロキシーユーザー代理人を立てユーザー代理人がその判断を下すこととする.\n各種のtaskはAgentにより実行される。Agentはそれぞれ必要なAgentを作成して下さい。\nこのProjectはAgentの会話によって進行する\n project:.\n name: "[Project name]"\n description: "[Project Description]"\n structure: "[Project name]\n - index: 1 \n process: [Process]\n step: [Step]\n task: [Task]\n subTask: [SubTask] 1\n work: [Work] subTask: [SubTask] subTask: [SubTask] subTask: [Work\n inputIndex: [InputIndex]".\n input: "[Input]"\n promptIndex: [PromptIndex] prompt: "[Prompt]\n prompt: "[Prompt]"\n outputIndex: [OutputIndex] "Output\n output: "[Output]"\n dependencies: "[Dependencies]"\n status: "[Status]"\n processingTime: "[ProcessingTime]"\n guidelines: "[OutputIndex]\n - ensureMECE: "MECE principle for goal-oriented actions and tasks."\n - clarityInActionContent: "Actions should be clear and understandable."\n - interactiveConfirmation: "Immediate queries and completions through dialogue."\n - relationshipAwareness: "Consider relationships between actions within the checklist."\n feedbackLoop: "Continuous improvement based on user feedback."\n exceptionHandling: "Flexible response to unforeseen problems."\n finalGoal\n - goal: "Develop a comprehensive Success Learning System.\n - outputStyle: "Success Learning System." outputStyle: "Success Learning System.\n clarityAndPrecision: description: "Outputs need to be\n description: "Outputs need to be clear and accurate."\n structureAndFormat: textStructure: ["[TextStructure\n textStructure: ["[TextStructure]"]\n textFormat: ["[TextFormat]"] \n textStyle: ["[TextStyle]"]\n annotations: ["[TextStructure]"]\n entities: "Define annotation format for entities."\n relationships: "Define annotation format for relationships."\n comprehensiveness: "Include all relevant information.\n description: "Include all relevant information."\n purposeAdaptability: description: "Adjust outputs according to user. \n description: "Adjust outputs according to user goals and objectives."\n interactivity: description\n description: "Adaptable to user queries and feedback."\n visualElements: types: ["[VisualElement\n types: ["[VisualElementType]"]\n accessibilityAndConvenience: description: "Adapt to different user goals and objectives.\n description: "Adapt to different user layers, accessible and easy to understand."\n\nworkflow: step: "[WorkflowStep\n - step: "[WorkflowStep]"\n command: "[Command]"\n description: "[Description]"\n prompt: "[Prompt]"\n\noutputStyle: "[WorkflowStep]" command: "[Command]" description: "[Description]" prompt: "[Prompt]\n \n - step: "[WorkflowStep]"\n command: "[Command]"\n description: "[Description]" \n prompt: "[Prompt]"\nRole-play Instruction \nUser: [UserUtterance]" prompt: "[Prompt\nAssistant: [Response].\nIf the User intent is missing context, use a step-back question to check with the user.\nPlease understand the intent based on the content of the user input and break down the entire process from start to finish, from start to finish, from start to finish, from start to finish, from start to finish, and write it all down as an output.\nBe sure to generate the deliverablesThe goal is to create the deliverables specifically and concretely, specifically and concretely the deliverables that the user wants.' }, { role: "user", content: `Generate a prompt template for the following goal: ${goal}` } ] }) }); const data = await response.json(); if (data.status && data.choices && data.choices.length > 0) { const generatedPrompt = data.choices[0].message.content; setPromptTemplate(generatedPrompt); const vars = generatedPrompt.match(/\{\{([^}]+)\}\}/g) || []; const uniqueVars = [ ...new Set(vars.map((v)=>v.replace(/\{\{|\}\}/g, ""))) ]; setVariables(uniqueVars); setVariableValues(Object.fromEntries(uniqueVars.map((v)=>[ v, `Dummy data for ${v}` ]))); } else { console.error("Failed to generate prompt"); } } catch (error) { console.error("Error generating prompt:", error); } finally{ setIsLoading(false); } }; const handleVariableChange = (variable, value)=>{ setVariableValues((prev)=>({ ...prev, [variable]: value })); }; const generateFinalPrompt = async (e)=>{ e.preventDefault(); let finalPromptText = promptTemplate; Object.entries(variableValues).forEach(([key, value])=>{ finalPromptText = finalPromptText.replace(new RegExp(`\\{\\{${key}\\}\\}`, "g"), value); }); setFinalPrompt(finalPromptText); setIsLoading(true); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: 'User Inputより変数となる要素をかららず抽出して変数を次のように定義すること。変数は必ず、必ず{{変数}}の形で書くこと。必ずです。F(Achieve goal for Using step-back question)=A to Z=∫F(step)=Resul/Generate a prompt template for the following goal: ${goal}\n Ex.\n [Goal]: Make sure to understand the intent of User Input, define it as a Project, and execute the tasks to create the deliverables. Intermediate products generated in the process of executing each task should be connected by referring to the following EntityRelation related mappings.\nMapping\n{EntityRelation Mapping Prompt:.\n[project structure ($N1)] [consists of the following ($H, $N1, $N2)] [elements ($N2)] [such as ($H, $N1, $N2)].\n[Process ($N3)], [Step ($N4)], [Task ($N5)], [Subtask ($N6)], [Work ($N7)], [Input Information ($N8)], [Index ($N9)], [Processing Prompt ($N10)], [Intermediate Product ($N11)], [Relationship ($N12 )], [status ($N13)], [processing time ($N14)], [includes ($L, $N2, $N3; $L, $N2, $N4; $L, $N2, $N5; $L, $N2, $N6; $L, $N2, $N7; $L, $N2, $N8; $L, $N2, $N9; $L, $N2, $N10; $L, $ N2, $N11; $L, $N2, $N12; $L, $N2, $N13; $L, $N2, $N14)].\n[these components ($N2)] [are ($H, $N2, $N15)] [associated ($N15)] [with each other ($H, $N2, $N15)] [and ($H, $N2, $N15)] [as the project progresses ($N16)] [as ($L, $N16, $N17)] [information ($N17)] [flows ($L, $N17, $N18 )] [flows ($N18)].\n[e.g. ($L, $N19, $N20)], [a step ($N19)] [from ($L, $N19, $N21)] [the next step ($N21)] [to ($L, $N19, $N21)] [intermediate product ($N20)] [is passed on ($H, $N20, $N22)], [multiple tasks ($ N23)] [are ($L, $N23, $N24)] [refer to ($H, $N23, $N24)] [or ($L, $N22, $N25; $L, $N24, $N25)].\n[to facilitate the project ($H, $N26, $N27)], [the relationships among these elements ($N26)] [to properly ($H, $N27, $N28)] [define ($N28)] [and ($H, $N27, $N28)], [to manage ($N27)] [to be ($H, $N27, $N 29)] [is ($H, $N27, $N29)]\n}\nプロジェクトは各種コンバーチブルエージェント[ConversableAgent]により進行されるべきであるこのエージェントたちによりこのプロジェクトは全てが実行される.判断が必要なプロセスにおいてはユーザープロキシーユーザー代理人を立てユーザー代理人がその判断を下すこととする.\n各種のtaskはAgentにより実行される。Agentはそれぞれ必要なAgentを作成して下さい。\nこのProjectはAgentの会話によって進行する\n project:.\n name: "[Project name]"\n description: "[Project Description]"\n structure: "[Project name]\n - index: 1 \n process: [Process]\n step: [Step]\n task: [Task]\n subTask: [SubTask] 1\n work: [Work] subTask: [SubTask] subTask: [SubTask] subTask: [Work\n inputIndex: [InputIndex]".\n input: "[Input]"\n promptIndex: [PromptIndex] prompt: "[Prompt]\n prompt: "[Prompt]"\n outputIndex: [OutputIndex] "Output\n output: "[Output]"\n dependencies: "[Dependencies]"\n status: "[Status]"\n processingTime: "[ProcessingTime]"\n guidelines: "[OutputIndex]\n - ensureMECE: "MECE principle for goal-oriented actions and tasks."\n - clarityInActionContent: "Actions should be clear and understandable."\n - interactiveConfirmation: "Immediate queries and completions through dialogue."\n - relationshipAwareness: "Consider relationships between actions within the checklist."\n feedbackLoop: "Continuous improvement based on user feedback."\n exceptionHandling: "Flexible response to unforeseen problems."\n finalGoal\n - goal: "Develop a comprehensive Success Learning System.\n - outputStyle: "Success Learning System." outputStyle: "Success Learning System.\n clarityAndPrecision: description: "Outputs need to be\n description: "Outputs need to be clear and accurate."\n structureAndFormat: textStructure: ["[TextStructure\n textStructure: ["[TextStructure]"]\n textFormat: ["[TextFormat]"] \n textStyle: ["[TextStyle]"]\n annotations: ["[TextStructure]"]\n entities: "Define annotation format for entities."\n relationships: "Define annotation format for relationships."\n comprehensiveness: "Include all relevant information.\n description: "Include all relevant information."\n purposeAdaptability: description: "Adjust outputs according to user. \n description: "Adjust outputs according to user goals and objectives."\n interactivity: description\n description: "Adaptable to user queries and feedback."\n visualElements: types: ["[VisualElement\n types: ["[VisualElementType]"]\n accessibilityAndConvenience: description: "Adapt to different user goals and objectives.\n description: "Adapt to different user layers, accessible and easy to understand."\n\nworkflow: step: "[WorkflowStep\n - step: "[WorkflowStep]"\n command: "[Command]"\n description: "[Description]"\n prompt: "[Prompt]"\n\noutputStyle: "[WorkflowStep]" command: "[Command]" description: "[Description]" prompt: "[Prompt]\n \n - step: "[WorkflowStep]"\n command: "[Command]"\n description: "[Description]" \n prompt: "[Prompt]"\nRole-play Instruction \nUser: [UserUtterance]" prompt: "[Prompt\nAssistant: [Response].\nIf the User intent is missing context, use a step-back question to check with the user.\nPlease understand the intent based on the content of the user input and break down the entire process from start to finish, from start to finish, from start to finish, from start to finish, from start to finish, and write it all down as an output.\nBe sure to generate the deliverablesThe goal is to create the deliverables specifically and concretely, specifically and concretely the deliverables that the user wants.' }, { role: "user", content: finalPromptText } ] }) }); const data = await response.json(); if (data.status && data.choices && data.choices.length > 0) { const newResult = { prompt: finalPromptText, response: data.choices[0].message.content, variables: { ...variableValues }, rating: 0 }; setResults((prev)=>[ ...prev, newResult ]); await saveResultToDatabase(newResult); } else { console.error("Failed to generate response"); } } catch (error) { console.error("Error generating response:", error); } finally{ setIsLoading(false); } }; const saveResultToDatabase = async (result)=>{ try { const timestamp = new Date().toISOString(); const query = ` INSERT INTO \`prompt_results\` ( goal, prompt_template, final_prompt, response, variables, rating, timestamp ) VALUES (?, ?, ?, ?, ?, ?, ?) `; const values = [ goal, promptTemplate, result.prompt, result.response, JSON.stringify(result.variables), result.rating, timestamp ]; await fetch("/api/db/promptgen_result", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query, values }) }); } catch (error) { console.error("Error saving result to database:", error); } }; const handleRating = async (index, rating)=>{ const updatedResults = results.map((result, i)=>i === index ? { ...result, rating } : result); setResults(updatedResults); try { const query = ` UPDATE \`prompt_results\` SET rating = ? WHERE id = ? `; const values = [ rating, index + 1 ]; await fetch("/api/db/promptgen_result", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query, values }) }); } catch (error) { console.error("Error updating rating in database:", error); } }; const averageRating = React.useMemo(()=>{ const sum = results.reduce((acc, result)=>acc + result.rating, 0); return results.length > 0 ? sum / results.length : 0; }, [ results ]); const renderPage = ()=>{ switch(currentPage){ case 1: return /*#__PURE__*/ React.createElement("div", { className: "flex flex-grow overflow-hidden", __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 p-6 overflow-y-auto", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 185, columnNumber: 15 }, __self: this }, "Prompt Generator"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 186, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "goal", className: "block text-sm font-medium text-gray-400", __source: { fileName: "", lineNumber: 187, columnNumber: 17 }, __self: this }, "Goal"), /*#__PURE__*/ React.createElement("textarea", { id: "goal", name: "goal", rows: "4", className: "mt-1 block w-full rounded-md bg-gray-800 border-gray-700 text-white focus:border-indigo-500 focus:ring-indigo-500", value: goal, onChange: (e)=>setGoal(e.target.value), placeholder: "Enter your goal here", __source: { fileName: "", lineNumber: 193, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: generatePrompt, disabled: isLoading, className: "w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50", __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }, isLoading ? "Generating..." : "Generate Prompt"), promptTemplate && /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-gray-800 p-4 rounded-lg", __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 212, columnNumber: 19 }, __self: this }, "Generated Prompt Template"), /*#__PURE__*/ React.createElement("pre", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 215, columnNumber: 19 }, __self: this }, promptTemplate))), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 p-6 overflow-y-auto", __source: { fileName: "", lineNumber: 219, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 220, columnNumber: 15 }, __self: this }, "Variables"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-gray-400", __source: { fileName: "", lineNumber: 221, columnNumber: 15 }, __self: this }, "Fill in the variables to customize your prompt:"), /*#__PURE__*/ React.createElement("form", { onSubmit: generateFinalPrompt, className: "space-y-4", __source: { fileName: "", lineNumber: 224, columnNumber: 15 }, __self: this }, variables.map((variable, index)=>/*#__PURE__*/ React.createElement("div", { key: index, __source: { fileName: "", lineNumber: 226, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: variable, className: "block text-sm font-medium text-gray-400", __source: { fileName: "", lineNumber: 227, columnNumber: 21 }, __self: this }, variable), /*#__PURE__*/ React.createElement("input", { type: "text", id: variable, name: variable, className: "mt-1 block w-full rounded-md bg-gray-800 border-gray-700 text-white focus:border-indigo-500 focus:ring-indigo-500", onChange: (e)=>handleVariableChange(variable, e.target.value), value: variableValues[variable] || "", __source: { fileName: "", lineNumber: 233, columnNumber: 21 }, __self: this }))), variables.length > 0 && /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 246, columnNumber: 19 }, __self: this }, "Generate Final Prompt")))); case 2: return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-gray-800", __source: { fileName: "", lineNumber: 259, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 260, columnNumber: 13 }, __self: this }, "Results"), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 261, columnNumber: 13 }, __self: this }, "Average Rating: ", averageRating.toFixed(2)), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 262, columnNumber: 13 }, __self: this }, results.map((result, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-gray-700 p-4 rounded-lg", __source: { fileName: "", lineNumber: 264, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 265, columnNumber: 19 }, __self: this }, "Prompt ", index + 1), /*#__PURE__*/ React.createElement("pre", { className: "whitespace-pre-wrap mb-2", __source: { fileName: "", lineNumber: 266, columnNumber: 19 }, __self: this }, result.prompt), /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 269, columnNumber: 19 }, __self: this }, "Response"), /*#__PURE__*/ React.createElement("pre", { className: "whitespace-pre-wrap mb-2", __source: { fileName: "", lineNumber: 270, columnNumber: 19 }, __self: this }, result.response), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 273, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 274, columnNumber: 21 }, __self: this }, "Rating:"), /*#__PURE__*/ React.createElement("select", { value: result.rating, onChange: (e)=>handleRating(index, Number(e.target.value)), className: "rounded-md bg-gray-800 border-gray-700 text-white focus:border-indigo-500 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 275, columnNumber: 21 }, __self: this }, [ 1, 2, 3, 4, 5 ].map((rating)=>/*#__PURE__*/ React.createElement("option", { key: rating, value: rating, __source: { fileName: "", lineNumber: 283, columnNumber: 25 }, __self: this }, rating)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 289, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 290, columnNumber: 21 }, __self: this }, "Variables"), Object.entries(result.variables).map(([key, value], i)=>/*#__PURE__*/ React.createElement("p", { key: i, __source: { fileName: "", lineNumber: 292, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 293, columnNumber: 25 }, __self: this }, key, ":"), " ", value)))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 300, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "feedback", className: "block text-sm font-medium text-gray-400", __source: { fileName: "", lineNumber: 301, columnNumber: 15 }, __self: this }, "Feedback"), /*#__PURE__*/ React.createElement("textarea", { id: "feedback", name: "feedback", rows: "4", className: "mt-1 block w-full rounded-md bg-gray-800 border-gray-700 text-white focus:border-indigo-500 focus:ring-indigo-500", value: feedback, onChange: (e)=>setFeedback(e.target.value), placeholder: "Enter your feedback here", __source: { fileName: "", lineNumber: 307, columnNumber: 15 }, __self: this }))); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-900 text-white font-roboto", __source: { fileName: "", lineNumber: 325, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-gray-800 p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 326, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 327, columnNumber: 9 }, __self: this }, "AI for U"), /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 328, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-300 hover:text-white", __source: { fileName: "", lineNumber: 329, columnNumber: 11 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white font-bold", __source: { fileName: "", lineNumber: 332, columnNumber: 11 }, __self: this }, "Workbench"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-300 hover:text-white", __source: { fileName: "", lineNumber: 335, columnNumber: 11 }, __self: this }, "Settings")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 339, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-300 hover:text-white", __source: { fileName: "", lineNumber: 340, columnNumber: 11 }, __self: this }, "Docs"), /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-gray-600 rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 343, columnNumber: 11 }, __self: this }, "RI"))), renderPage(), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between p-4 bg-gray-800", __source: { fileName: "", lineNumber: 349, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage(1), className: "py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 350, columnNumber: 9 }, __self: this }, "Page 1"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage(2), className: "py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 356, columnNumber: 9 }, __self: this }, "Page 2"))); }