From c860b4ee1a64fd1423458a349e129df0443e7e30 Mon Sep 17 00:00:00 2001 From: shatfield4 Date: Mon, 5 May 2025 17:44:24 -0700 Subject: [PATCH 01/21] wip system prompt history sidebar ui --- .../ChatPromptHistory/index.jsx | 50 +++++ .../ChatSettings/ChatPromptSettings/index.jsx | 200 ++++++++++-------- 2 files changed, 158 insertions(+), 92 deletions(-) create mode 100644 frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/ChatPromptHistory/index.jsx diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/ChatPromptHistory/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/ChatPromptHistory/index.jsx new file mode 100644 index 00000000000..5d0d6da0383 --- /dev/null +++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/ChatPromptHistory/index.jsx @@ -0,0 +1,50 @@ +const systemPromptHistory = [ + { + prompt: "Given the following conversation, relevant context, and a follow up question, reply with an answer to the current question the user is asking. Return only your response to the question given the above information following the users instructions as needed.", + modifiedAt: new Date("2024-01-01"), + }, + { + prompt: "Given the following conversation, relevant context, and a follow up question, reply with an answer to the current question the user is asking. Return only your response to the question given the above information following the users instructions as needed.", + modifiedAt: new Date("2024-01-01"), + }, + { + prompt: "Given the following conversation, relevant context, and a follow up question, reply with an answer to the current question the user is asking. Return only your response to the question given the above information following the users instructions as needed.", + modifiedAt: new Date("2024-01-01"), + }, + { + prompt: "Given the following conversation, relevant context, and a follow up question, reply with an answer to the current question the user is asking. Return only your response to the question given the above information following the users instructions as needed.", + modifiedAt: new Date("2024-01-01"), + }, +]; + +export default function ChatPromptHistory() { + return ( +
+
+
+ System Prompt History +
+
Clear All
+
+
+ {systemPromptHistory.map((prompt) => ( + + ))} +
+
+ ); +} + +function PromptHistoryItem({ prompt, modifiedAt, modifiedBy }) { + return ( +
+
+
{modifiedAt.toLocaleString()}
+
Restore
+
+
+
{prompt}
+
+
+ ); +} diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/index.jsx index cfc0f451b0c..dd33f656248 100644 --- a/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/index.jsx +++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/index.jsx @@ -5,12 +5,14 @@ import SystemPromptVariable from "@/models/systemPromptVariable"; import Highlighter from "react-highlight-words"; import { Link, useSearchParams } from "react-router-dom"; import paths from "@/utils/paths"; +import ChatPromptHistory from "./ChatPromptHistory"; export default function ChatPromptSettings({ workspace, setHasChanges }) { const { t } = useTranslation(); const [availableVariables, setAvailableVariables] = useState([]); const [prompt, setPrompt] = useState(chatPrompt(workspace)); const [isEditing, setIsEditing] = useState(false); + const [showPromptHistory, setShowPromptHistory] = useState(false); const promptRef = useRef(null); const [searchParams] = useSearchParams(); @@ -34,106 +36,120 @@ export default function ChatPromptSettings({ workspace, setHasChanges }) { }, [isEditing]); return ( -
-
- -

- {t("chat.prompt.description")} -

-

- You can insert{" "} - - prompt variables - {" "} - like:{" "} - {availableVariables.slice(0, 3).map((v, i) => ( - <> - - {`{${v.key}}`} - - {i < availableVariables.length - 1 && ", "} - - ))} - {availableVariables.length > 3 && ( + <> + {showPromptHistory && } +

+
+
+ + +
+

+ {t("chat.prompt.description")} +

+

+ You can insert{" "} - +{availableVariables.length - 3} more... - - )} -

-
+ prompt variables + {" "} + like:{" "} + {availableVariables.slice(0, 3).map((v, i) => ( + <> + + {`{${v.key}}`} + + {i < availableVariables.length - 1 && ", "} + + ))} + {availableVariables.length > 3 && ( + + +{availableVariables.length - 3} more... + + )} +

+
- + -
- - Given the following conversation, relevant context, and a follow up - question, reply with an answer to the current question the user is - asking. Return only your response to the question given the above - information following the users instructions as needed. - - {isEditing ? ( -