File size: 4,923 Bytes
20ec4ad 969b550 20ec4ad 969b550 20ec4ad 969b550 20ec4ad 969b550 20ec4ad 969b550 20ec4ad |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
import { useRef, useState } from "react";
import { editor } from "monaco-editor";
import { useMount, useLocalStorage } from "react-use";
import { toast } from "react-toastify";
import Sidebar, { View } from "./sidebar/Sidebar";
import EditorPanel from "./panels/EditorPanel";
import FilesPanel from "./panels/FilesPanel";
import PreviewPanel from "./panels/PreviewPanel";
import APIKeysConfig from "./panels/APIKeysConfig";
import AgentConfig from "./panels/AgentConfig";
import SystemPromptConfig from "./panels/SystemPromptConfig";
import AskAI from "./ask-ai/ask-ai";
import agents from "../../agents.json";
import { defaultHTML } from "../../utils/consts";
function App() {
const [htmlStorage, , removeHtmlStorage] =
useLocalStorage<string>("html_content", "");
const [html, setHtml] = useState<string>(htmlStorage || defaultHTML);
const [error, setError] = useState(false);
const [isAiWorking, setIsAiWorking] = useState(false);
const [selectedAgent, setSelectedAgent] = useLocalStorage<string>(
"selectedAgent",
agents[0].id
);
const agentId = selectedAgent || agents[0].id; // ← nunca undefined
const [activePanel, setActivePanel] = useState<View>("editor");
const [prompts, setPrompts] = useState<string[]>([]);
const [activeViewer, setActiveViewer] = useState<string>("viewer1");
const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
useMount(() => {
if (htmlStorage) {
removeHtmlStorage();
toast.warn("Conteúdo HTML restaurado do storage.");
}
});
return (
<div className="h-screen flex overflow-hidden bg-gray-950 text-gray-200">
{/* Team/Agentes - Barra lateral esquerda */}
<div className="w-20 bg-gray-900 border-r border-gray-800 flex flex-col items-center py-4">
<div className="mb-6">
<img src="/logo.svg" alt="Logo" className="w-10 h-10" />
</div>
<div className="flex flex-col items-center space-y-6">
{agents.slice(0, 5).map((agent) => (
<div
key={agent.id}
className={`w-12 h-12 rounded-full flex items-center justify-center cursor-pointer transition-all
${selectedAgent === agent.id ? 'bg-indigo-600' : 'bg-gray-800 hover:bg-gray-700'}`}
onClick={() => setSelectedAgent(agent.id)}
title={agent.name}
>
<span className="text-lg font-bold">{agent.name.charAt(0)}</span>
</div>
))}
</div>
</div>
{/* Chat / agentes */}
<div className="w-[320px] bg-gray-900 border-r border-gray-800 flex flex-col">
<div className="p-4 border-b border-gray-800">
<h2 className="text-xl font-semibold">Agentes IA</h2>
<p className="text-sm text-gray-400 mt-1">Selecione um agente para ajudar no seu projeto</p>
</div>
<AskAI
agentId={agentId}
html={html}
setHtml={setHtml}
isAiWorking={isAiWorking}
setisAiWorking={setIsAiWorking}
onNewPrompt={(p) => setPrompts((ps) => [...ps, p])}
onScrollToBottom={() => {
editorRef.current?.revealLine(
editorRef.current?.getModel()?.getLineCount() ?? 0
);
}}
/>
</div>
{/* Painéis principais */}
<div className="flex flex-1 flex-col">
<div className="h-14 bg-gray-900 border-b border-gray-800 flex items-center px-4">
<div className="flex space-x-2">
<button
className={`px-4 py-2 rounded ${activeViewer === 'viewer1' ? 'bg-indigo-600' : 'bg-gray-800 hover:bg-gray-700'}`}
onClick={() => setActiveViewer('viewer1')}
>
Viewer 1
</button>
<button
className={`px-4 py-2 rounded ${activeViewer === 'viewer2' ? 'bg-indigo-600' : 'bg-gray-800 hover:bg-gray-700'}`}
onClick={() => setActiveViewer('viewer2')}
>
Viewer 2
</button>
</div>
</div>
<div className="flex flex-1">
<Sidebar view={activePanel} onSelect={setActivePanel} />
<div className="flex-1 overflow-auto bg-gray-900 p-4">
{activePanel === "editor" && (
<EditorPanel
html={html}
setHtml={setHtml}
isAiWorking={isAiWorking}
setError={setError}
editorRef={editorRef}
/>
)}
{activePanel === "files" && <FilesPanel />}
{activePanel === "preview" && <PreviewPanel html={html} />}
{activePanel === "apikeys" && <APIKeysConfig />}
{activePanel === "agents" && <AgentConfig />}
{activePanel === "system" && <SystemPromptConfig />}
</div>
</div>
</div>
</div>
);
}
export default App;
|