external/BuddAI
1
0
Fork 0
mirror of https://github.com/JamesTheGiblet/BuddAI.git synced 2026-01-08 21:58:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add session title management and rename functionality in the BuddAI interface

Browse source
This commit is contained in:
JamesTheGiblet 2025-12-29 13:43:37 +00:00
parent 6889087dd8
commit a70b9ea2ce
3 changed files with 112 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

74
frontend/index.html
View file

@ -42,9 +42,16 @@
--code-border: #d1d5da;
--code-text: #24292e;
}
.sidebar-left { width: 260px; background: var(--header-bg); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; flex-shrink: 0; }
.sidebar-left { width: 260px; background: var(--header-bg); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; flex-shrink: 0; transition: width 0.3s, opacity 0.3s; overflow: hidden; }
.sidebar-left.collapsed { width: 0; opacity: 0; border: none; }
.session-list { flex: 1; overflow-y: auto; }
.session-item { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid var(--border-color); font-size: 0.85em; color: var(--text-color); transition: background 0.2s; }
.session-item { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid var(--border-color); font-size: 0.85em; color: var(--text-color); transition: background 0.2s; display: flex; justify-content: space-between; align-items: center; }
.session-info { flex: 1; overflow: hidden; }
.rename-input { width: 100%; background: var(--input-bg); color: var(--text-color); border: 1px solid var(--btn-bg); padding: 4px; border-radius: 3px; font-family: inherit; }
.edit-icon, .delete-icon { opacity: 0; cursor: pointer; padding: 4px; font-size: 1.1em; margin-left: 2px; }
.session-item:hover .edit-icon, .session-item:hover .delete-icon { opacity: 0.5; }
.edit-icon:hover, .delete-icon:hover { opacity: 1; }
.delete-icon:hover { color: #ff4444; }
.session-item:hover { background: var(--bg-color); }
.session-item.active { background: var(--btn-bg); color: white; border-color: var(--btn-bg); }
.new-chat-btn { margin: 15px; padding: 10px; background: var(--btn-bg); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
@ -187,6 +194,9 @@
const [history, setHistory] = useState([]);
const [sessions, setSessions] = useState([]);
const [currentSessionId, setCurrentSessionId] = useState(null);
const [showSidebar, setShowSidebar] = useState(true);
const [editingSession, setEditingSession] = useState(null);
const [renameText, setRenameText] = useState("");
const [input, setInput] = useState("");
const [loading, setLoading] = useState(false);
const [status, setStatus] = useState("connecting");
@ -248,6 +258,35 @@
return () => clearInterval(timer);
}, []);
const handleRename = async (e) => {
if (e.key === 'Enter') {
await fetch("/api/session/rename", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ session_id: editingSession, title: renameText })
});
setEditingSession(null);
fetchSessions();
}
};
const handleDeleteSession = async (e, sessionId) => {
e.stopPropagation();
if (!window.confirm("Delete this chat?")) return;
await fetch("/api/session/delete", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ session_id: sessionId })
});
if (sessionId === currentSessionId) {
setHistory([]);
setCurrentSessionId(null);
}
fetchSessions();
};
const loadSession = async (sessionId) => {
setLoading(true);
try {
@ -358,6 +397,7 @@
onChange={handleFileUpload}
/>
<button className="clear-btn" onClick={() => document.getElementById('upload-input').click()}>📂 Upload</button>
<button className="clear-btn" onClick={() => setShowSidebar(!showSidebar)}>{showSidebar ? 'Hide History' : 'Show History'}</button>
<button className="clear-btn" onClick={() => setIsSidebarOpen(!isSidebarOpen)}>{isSidebarOpen ? 'Hide Code' : 'Show Code'}</button>
<button className="clear-btn" onClick={() => setTheme(t => t === 'dark' ? 'light' : 'dark')}>{theme === 'dark' ? '☀️' : '🌙'}</button>
<select
@ -372,13 +412,37 @@
</div>
</div>
<div className="main-layout">
<div className="sidebar-left">
<div className={`sidebar-left ${!showSidebar ? 'collapsed' : ''}`}>
<button className="new-chat-btn" onClick={startNewSession}>+ New Chat</button>
<div className="session-list">
{sessions.map(s => (
<div key={s.id} className={`session-item ${s.id === currentSessionId ? 'active' : ''}`} onClick={() => loadSession(s.id)}>
<span className="session-date">{new Date(s.date).toLocaleDateString()} {new Date(s.date).toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'})}</span>
<span className="session-id">{s.id}</span>
{editingSession === s.id ? (
<input
className="rename-input"
value={renameText}
onChange={e => setRenameText(e.target.value)}
onKeyDown={handleRename}
onBlur={() => setEditingSession(null)}
autoFocus
onClick={e => e.stopPropagation()}
/>
) : (
<>
<div className="session-info">
<span className="session-date">{s.title || (new Date(s.date).toLocaleDateString() + ' ' + new Date(s.date).toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'}))}</span>
{!s.title && <span className="session-id">{s.id}</span>}
</div>
<div style={{display:'flex'}}>
<span className="edit-icon" onClick={(e) => {
e.stopPropagation();
setEditingSession(s.id);
setRenameText(s.title || "");
}}>✏️</span>
<span className="delete-icon" onClick={(e) => handleDeleteSession(e, s.id)}>🗑️</span>
</div>
</>
)}
</div>
))}
</div>