evandro/ForgeLM
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): fix Open Settings button, improve notice design, align AgenticToggle

Browse Source 
- ChatView: add onOpenSettings prop; notice button routes to settings or sidebar
  based on actionLabel ('Open settings' → onOpenSettings, else → onOpenSidebar)
- App.tsx: pass onOpenSettings={() => setView('settings')} to ChatView
- ChatView.css: polish composer-notice with backdrop-filter, tighter typography,
  improved notice-action-btn with hover accent color and active scale
- AgenticToggle: rewrite from Tailwind to CSS variables matching project design
  system (dark bg3, accent blue, dot indicator, ON/OFF badge)
This commit is contained in:
Evandro Fonseca Junior committed 2026-04-02 21:15:18 -03:00
1 parent 88f4319c3f
commit de36b04256
4 files changed
+97 -45
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

tauri-app/src/App.tsx
+1
View File
@@ -137,6 +137,7 @@ export default function App() {
onChatCreated={(id) => { setCurrentChatId(id); loadChats(); setSidebarOpen(false); }}
onChatUpdated={loadChats}
onOpenSidebar={() => setSidebarOpen(true)}
onOpenSettings={() => setView("settings")}
/>
)}
</div>
tauri-app/src/components/ChatView.css
+40 -12
View File
@@ -627,31 +627,59 @@
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
padding: 14px 16px;
margin-bottom: 12px;
padding: 12px 16px;
border-radius: var(--radius-lg);
border: 1px solid var(--border2);
background: rgba(255, 255, 255, 0.025);
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(8px);
}
.composer-notice strong {
display: block;
color: var(--text);
margin-bottom: 2px;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: -0.01em;
}
.composer-notice p {
color: var(--text2);
font-size: 0.8rem;
line-height: 1.5;
margin: 0;
}
.composer-notice.warning {
border-color: rgba(250, 204, 21, 0.2);
background: rgba(250, 204, 21, 0.04);
}
.composer-notice.info {
border-color: rgba(72, 166, 255, 0.2);
background: rgba(72, 166, 255, 0.04);
}
.composer-notice strong { display: block; color: var(--text); margin-bottom: 3px; font-size: 0.88rem; }
.composer-notice p { color: var(--text2); font-size: 0.82rem; line-height: 1.5; }
.composer-notice.warning { border-color: rgba(255,214,10,0.18); background: rgba(72,55,4,0.16); }
.composer-notice.info { border-color: rgba(72,166,255,0.2); background: rgba(16,38,63,0.2); }
.notice-action-btn {
border: 1px solid var(--border2);
background: var(--bg3);
color: var(--text);
border-radius: 10px;
padding: 9px 13px;
border-radius: var(--radius);
padding: 8px 14px;
font: inherit;
font-size: 0.82rem;
font-size: 0.8rem;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
transition: background 0.15s, border-color 0.15s, color 0.15s;
flex-shrink: 0;
letter-spacing: -0.01em;
}
.notice-action-btn:hover {
background: var(--bg4);
border-color: rgba(72, 166, 255, 0.35);
color: var(--accent2);
}
.notice-action-btn:active {
transform: scale(0.98);
}
.notice-action-btn:hover { background: var(--bg4); border-color: rgba(72,166,255,0.4); }
/* ── Message wrappers ── */
.msg-wrapper {
tauri-app/src/components/ChatView.tsx
+15 -6
View File
@@ -38,6 +38,7 @@ interface Props {
onChatCreated: (id: number) => void;
onChatUpdated: () => void;
onOpenSidebar?: () => void;
onOpenSettings?: () => void;
onDegradationDetected?: () => void;
}
@@ -45,7 +46,7 @@ export default function ChatView({
db, chatId, server, apiKey, model,
models, localModels, selectedModel, onModelChange, onModelSwap, isSwapping, status,
runtimeMode = "remote", runtimeStatus = "ready", showDebugTools = Boolean((import.meta as ImportMeta & { env?: { DEV?: boolean } }).env?.DEV),
onChatCreated, onChatUpdated, onOpenSidebar, onDegradationDetected
onChatCreated, onChatUpdated, onOpenSidebar, onOpenSettings, onDegradationDetected
}: Props) {
const [messages, setMessages] = useState<Message[]>([]);
const [input, setInput] = useState("");
@@ -796,11 +797,19 @@ export default function ChatView({
<strong>{composerNotice.title}</strong>
<p>{composerNotice.description}</p>
</div>
{onOpenSidebar && (
<button type="button" className="notice-action-btn" onClick={onOpenSidebar}>
{composerNotice.actionLabel}
</button>
)}
<button
type="button"
className="notice-action-btn"
onClick={() => {
if (composerNotice.actionLabel === "Open settings") {
onOpenSettings?.();
} else {
onOpenSidebar?.();
}
}}
>
{composerNotice.actionLabel}
</button>
</div>
)}
tauri-app/src/components/forgeagent/AgenticToggle.tsx
+41 -27
View File
@@ -5,46 +5,60 @@ interface AgenticToggleProps {
}
export default function AgenticToggle({ isActive, onToggle, disabled = false }: AgenticToggleProps) {
const label = isActive ? "Modo agentic ativo" : "Modo agentic desativado";
return (
<button
type="button"
onClick={onToggle}
disabled={disabled}
aria-pressed={isActive}
aria-label={label}
aria-label={isActive ? "Modo agentic ativo" : "Modo agentic desativado"}
title="Alterna o modo agentic: o assistente pode planejar e executar tarefas com mais autonomia."
className={`group relative inline-flex min-h-9 items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium tracking-tight shadow-sm transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950 ${
disabled
? "cursor-not-allowed border-slate-800 bg-slate-900/60 text-slate-500 opacity-60"
: isActive
? "border-cyan-400/40 bg-cyan-500/15 text-cyan-200 hover:border-cyan-300/60 hover:bg-cyan-500/20 hover:text-cyan-100"
: "border-slate-700 bg-slate-900/80 text-slate-300 hover:border-slate-500 hover:bg-slate-800 hover:text-slate-100"
}`}
style={{
display: "inline-flex",
alignItems: "center",
gap: "6px",
padding: "5px 10px",
borderRadius: "var(--radius)",
border: isActive
? "1px solid rgba(72,166,255,0.35)"
: "1px solid var(--border2)",
background: isActive
? "rgba(72,166,255,0.08)"
: "var(--bg3)",
color: isActive ? "var(--accent2)" : "var(--text2)",
fontSize: "0.78rem",
fontWeight: 500,
fontFamily: "inherit",
cursor: disabled ? "not-allowed" : "pointer",
opacity: disabled ? 0.5 : 1,
transition: "all 0.15s ease",
whiteSpace: "nowrap",
letterSpacing: "-0.01em",
}}
>
<span
aria-hidden="true"
className={`h-2.5 w-2.5 rounded-full transition-all duration-200 ${
isActive ? "bg-cyan-300 shadow-[0_0_12px_rgba(103,232,249,0.85)]" : "bg-slate-500"
}`}
style={{
width: "6px",
height: "6px",
borderRadius: "50%",
background: isActive ? "var(--accent)" : "var(--text3)",
flexShrink: 0,
boxShadow: isActive ? "0 0 6px rgba(72,166,255,0.6)" : "none",
transition: "all 0.15s ease",
}}
/>
<span className="whitespace-nowrap">🛠️ Modo Agentic</span>
Agentic
<span
className={`rounded-full border px-1.5 py-0.5 text-[10px] uppercase tracking-[0.18em] transition-colors duration-200 ${
isActive
? "border-cyan-400/30 bg-cyan-400/10 text-cyan-200"
: "border-slate-700 bg-slate-800/80 text-slate-400"
}`}
style={{
fontSize: "0.68rem",
fontWeight: 600,
color: isActive ? "var(--accent)" : "var(--text3)",
letterSpacing: "0.05em",
textTransform: "uppercase",
}}
>
{isActive ? "On" : "Off"}
</span>
<span
role="tooltip"
className="pointer-events-none absolute bottom-full left-1/2 z-20 mb-2 w-56 -translate-x-1/2 rounded-lg border border-slate-700 bg-slate-950 px-2.5 py-2 text-[11px] leading-snug text-slate-200 opacity-0 shadow-lg transition-all duration-200 group-hover:opacity-100 group-hover:translate-y-0 group-focus-visible:opacity-100"
>
Habilita um modo mais autônomo para tarefas complexas, planejamento e execução assistida.
{isActive ? "ON" : "OFF"}
</span>
</button>
);