Samuele E. Locatelli
91 lines
2.3 KiB
React
91 lines
2.3 KiB
React
// src/ChatHeader.jsx
|
||
import React from "react";
|
||
|
||
export default function ChatHeader({
|
||
theme,
|
||
onToggleTheme,
|
||
onReloadHistory,
|
||
onFreshStart,
|
||
onCreateSession,
|
||
onManageSession,
|
||
sessionId,
|
||
sessionName
|
||
}) {
|
||
const hasSession = Boolean(sessionId);
|
||
|
||
return (
|
||
<header
|
||
className={`${theme.headerBg} p-2 sticky-top shadow row align-items-center`}
|
||
>
|
||
{/* Left column */}
|
||
<div className="col-4 d-flex flex-wrap gap-2 align-items-center">
|
||
{hasSession && (
|
||
<>
|
||
<button
|
||
className="btn btn-sm btn-outline-light"
|
||
onClick={onReloadHistory}
|
||
title="Reload current session history"
|
||
>
|
||
🔄
|
||
</button>
|
||
|
||
<button
|
||
className="btn btn-sm btn-warning"
|
||
onClick={onFreshStart}
|
||
title="Reset/Clear current session and start fresh"
|
||
>
|
||
🆕
|
||
</button>
|
||
</>
|
||
)}
|
||
|
||
{/* Questi due pulsanti sempre visibili */}
|
||
<button
|
||
className="btn btn-sm btn-success"
|
||
onClick={onCreateSession}
|
||
title="Create a brand new session"
|
||
>
|
||
➕
|
||
</button>
|
||
|
||
<button
|
||
className="btn btn-sm btn-info"
|
||
onClick={onManageSession}
|
||
title="Manage your chat sessions"
|
||
>
|
||
📂
|
||
</button>
|
||
|
||
{/* Nome sessione solo se esiste */}
|
||
{hasSession && sessionName && (
|
||
<span
|
||
className="badge bg-secondary text-truncate small"
|
||
style={{ maxWidth: "150px" }}
|
||
title={sessionName}
|
||
>
|
||
{sessionName}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* Center column: titolo solo se c'è sessione */}
|
||
<div className="col-5 text-center">
|
||
<h4 className="mb-0">🤖 EgalWare's LLM ChatBot</h4>
|
||
</div>
|
||
|
||
{/* Right column: toggle tema solo se c'è sessione */}
|
||
<div className="col-3 d-flex flex-row-reverse">
|
||
<button
|
||
className="btn btn-sm btn-outline-light d-flex align-items-center gap-1"
|
||
onClick={onToggleTheme}
|
||
title="Toggle light/dark theme"
|
||
>
|
||
<span role="img" aria-label="theme toggle icon">🌓</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|
||
|
||
|