From 1b32222c10c6ae6f1fd6c93f6abd8cbeab16f108 Mon Sep 17 00:00:00 2001 From: Priyash Patil <38959321+priyashpatil@users.noreply.github.com> Date: Fri, 7 Jun 2024 17:51:45 +0530 Subject: [PATCH 1/2] feat(gui): add ability to change the session title --- core/util/history.ts | 1 - gui/src/hooks/useHistory.tsx | 17 +++++----- gui/src/pages/history.tsx | 60 +++++++++++++++++++++++++++++++----- 3 files changed, 62 insertions(+), 16 deletions(-) diff --git a/core/util/history.ts b/core/util/history.ts index 4a24c78d5..7a4fb62c3 100644 --- a/core/util/history.ts +++ b/core/util/history.ts @@ -102,7 +102,6 @@ class HistoryManager { if (sessionInfo.sessionId === session.sessionId) { sessionInfo.title = session.title; sessionInfo.workspaceDirectory = session.workspaceDirectory; - sessionInfo.dateCreated = String(Date.now()); found = true; break; } diff --git a/gui/src/hooks/useHistory.tsx b/gui/src/hooks/useHistory.tsx index 968146981..89bbda0ac 100644 --- a/gui/src/hooks/useHistory.tsx +++ b/gui/src/hooks/useHistory.tsx @@ -40,13 +40,16 @@ function useHistory(dispatch: Dispatch) { dispatch(newSession()); await new Promise((resolve) => setTimeout(resolve, 10)); - let title = truncateText( - stripImages(stateCopy.history[0].message.content) - .split("\n") - .filter((l) => l.trim() !== "") - .slice(-1)[0] || "", - 50, - ); + let title = + stateCopy.title === "New Session" + ? truncateText( + stripImages(stateCopy.history[0].message.content) + .split("\n") + .filter((l) => l.trim() !== "") + .slice(-1)[0] || "", + 50, + ) + : (await getSession(stateCopy.sessionId)).title; // to ensure titles are synced with updates from history page. if ( false && // Causing maxTokens to be set to 20 for main requests sometimes, so disabling until resolved diff --git a/gui/src/pages/history.tsx b/gui/src/pages/history.tsx index 6ad34e0e4..b23c37912 100644 --- a/gui/src/pages/history.tsx +++ b/gui/src/pages/history.tsx @@ -1,5 +1,9 @@ -import { ArrowLeftIcon, TrashIcon } from "@heroicons/react/24/outline"; -import { SessionInfo } from "core"; +import { + ArrowLeftIcon, + PencilSquareIcon, + TrashIcon, +} from "@heroicons/react/24/outline"; +import { PersistedSessionInfo, SessionInfo } from "core"; import MiniSearch from "minisearch"; import React, { Fragment, useEffect, useState } from "react"; import { useDispatch } from "react-redux"; @@ -91,8 +95,24 @@ function TableRow({ const apiUrl = window.serverUrl; const workspacePaths = window.workspacePaths || [""]; const [hovered, setHovered] = useState(false); + const [editing, setEditing] = useState(false); + const [sessionTitle, setSessionTitle] = useState(session.title); + + const { saveSession, deleteSession, loadSession, getSession, updateSession } = + useHistory(dispatch); - const { saveSession, deleteSession, loadSession } = useHistory(dispatch); + const handleKeyUp = async (e: React.KeyboardEvent) => { + if (sessionTitle !== session.title) { + session.title = sessionTitle; + const persistedSessionInfo = await getSession(session.sessionId); + persistedSessionInfo.title = sessionTitle; + await updateSession(persistedSessionInfo); + } + + if (e.key === "Enter" || e.key === "Escape") { + setEditing(false); + } + }; return ( { // Save current session saveSession(); - await loadSession(session.sessionId); navigate("/"); }} > -
- {JSON.stringify(session.title).slice(1, -1)} +
+ {editing ? ( + titleInput && titleInput.focus()} + value={sessionTitle} + onChange={(e) => setSessionTitle(e.target.value)} + onKeyUp={(e) => handleKeyUp(e)} + onBlur={() => setEditing(false)} + /> + ) : ( + JSON.stringify(session.title).slice(1, -1) + )}
-
+ +
{date.toLocaleString("en-US", { year: "2-digit", month: "2-digit", @@ -122,10 +154,22 @@ function TableRow({ hour12: true, })} {" | "} - {lastPartOfPath(session.workspaceDirectory || "")}/ + {lastPartOfPath(session.workspaceDirectory || "")}
+ {hovered && ( + { + setEditing(true); + }} + > + + + )} + {hovered && ( Date: Tue, 11 Jun 2024 14:00:50 -0700 Subject: [PATCH 2/2] small tweaks to session title input --- gui/src/pages/history.tsx | 31 ++++++++++++++++++------------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/gui/src/pages/history.tsx b/gui/src/pages/history.tsx index b23c37912..377455ec9 100644 --- a/gui/src/pages/history.tsx +++ b/gui/src/pages/history.tsx @@ -3,7 +3,7 @@ import { PencilSquareIcon, TrashIcon, } from "@heroicons/react/24/outline"; -import { PersistedSessionInfo, SessionInfo } from "core"; +import { SessionInfo } from "core"; import MiniSearch from "minisearch"; import React, { Fragment, useEffect, useState } from "react"; import { useDispatch } from "react-redux"; @@ -11,6 +11,7 @@ import { useNavigate } from "react-router-dom"; import styled from "styled-components"; import { defaultBorderRadius, + Input, lightGray, vscBackground, vscBadgeBackground, @@ -96,21 +97,25 @@ function TableRow({ const workspacePaths = window.workspacePaths || [""]; const [hovered, setHovered] = useState(false); const [editing, setEditing] = useState(false); - const [sessionTitle, setSessionTitle] = useState(session.title); + const [sessionTitleEditValue, setSessionTitleEditValue] = useState( + session.title, + ); const { saveSession, deleteSession, loadSession, getSession, updateSession } = useHistory(dispatch); const handleKeyUp = async (e: React.KeyboardEvent) => { - if (sessionTitle !== session.title) { - session.title = sessionTitle; - const persistedSessionInfo = await getSession(session.sessionId); - persistedSessionInfo.title = sessionTitle; - await updateSession(persistedSessionInfo); - } - - if (e.key === "Enter" || e.key === "Escape") { + if (e.key === "Enter") { + if (sessionTitleEditValue !== session.title) { + session.title = sessionTitleEditValue; + const persistedSessionInfo = await getSession(session.sessionId); + persistedSessionInfo.title = sessionTitleEditValue; + await updateSession(persistedSessionInfo); + setEditing(false); + } + } else if (e.key === "Escape") { setEditing(false); + setSessionTitleEditValue(session.title); } }; @@ -130,12 +135,12 @@ function TableRow({ >
{editing ? ( - titleInput && titleInput.focus()} - value={sessionTitle} - onChange={(e) => setSessionTitle(e.target.value)} + value={sessionTitleEditValue} + onChange={(e) => setSessionTitleEditValue(e.target.value)} onKeyUp={(e) => handleKeyUp(e)} onBlur={() => setEditing(false)} />