From aaa2c48e7de8b2592eaf2895bd0413af07811094 Mon Sep 17 00:00:00 2001
From: maver <kentucky@posteo.de>
Date: Sun, 25 Jun 2023 18:20:53 +0200
Subject: [PATCH] Add basic claude support

---
 public/css/promptmanager.css    | 79 +++++++++++++++++----------------
 public/index.html               | 32 ++++++-------
 public/script.js                | 14 +++++-
 public/scripts/PromptManager.js |  2 +-
 public/scripts/openai.js        | 13 ++++--
 5 files changed, 80 insertions(+), 60 deletions(-)

diff --git a/public/css/promptmanager.css b/public/css/promptmanager.css
index 6d71d43bb..6cc7ef4e8 100644
--- a/public/css/promptmanager.css
+++ b/public/css/promptmanager.css
@@ -1,19 +1,21 @@
-#openai_prompt_manager {
+/* OpenAI */
+
+#completion_prompt_manager {
     margin: 0.5em 0.25em;
 }
 
-#openai_prompt_manager .caution {
+#completion_prompt_manager .caution {
     color: var(--fullred);
 }
 
-#openai_prompt_manager #openai_prompt_manager_list {
+#completion_prompt_manager #completion_prompt_manager_list {
     display: flex;
     flex-direction: column;
     min-height: 300px;
     max-height: 800px;
 }
 
-#openai_prompt_manager .openai_prompt_manager_list_separator hr {
+#completion_prompt_manager .completion_prompt_manager_list_separator hr {
     grid-column-start: 1;
     grid-column-end: 4;
     width: 100%;
@@ -22,48 +24,48 @@
     min-height: 1px;
 }
 
-#openai_prompt_manager #openai_prompt_manager_list li {
+#completion_prompt_manager #completion_prompt_manager_list li {
     display: grid;
     grid-template-columns: 4fr 80px 60px;
     margin-bottom: 0.5em;
     width: 100%
 }
 
-#openai_prompt_manager #openai_prompt_manager_list .openai_prompt_manager_marker span span {
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_marker span span {
     /** TODO: Introduce classes to avoid this */
     display: inline !important;
 }
 
-#openai_prompt_manager #openai_prompt_manager_list .openai_prompt_manager_marker .fa-thumb-tack {
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_marker .fa-thumb-tack {
     padding: 0 0.5em;
     color: var(--white50a);
 }
 
-#openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_list_head .prompt_manager_prompt_tokens,
-#openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_prompt .prompt_manager_prompt_tokens {
+#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_list_head .prompt_manager_prompt_tokens,
+#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt .prompt_manager_prompt_tokens {
     text-align: right;
 }
 
-#openai_prompt_manager #openai_prompt_manager_list .openai_prompt_manager_prompt .prompt_manager_prompt_controls {
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .prompt_manager_prompt_controls {
     text-align: right;
 }
 
-#openai_prompt_manager .openai_prompt_manager_list_head {
+#completion_prompt_manager .completion_prompt_manager_list_head {
     padding: 0.5em;
 }
 
-#openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_prompt {
+#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt {
     align-items: center;
     padding: 0.5em;
     border: 1px solid var(--white30a);
 }
 
-#openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_prompt .prompt_manager_prompt_controls {
+#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt .prompt_manager_prompt_controls {
     display: flex;
     justify-content: end;
 }
 
-#openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_prompt span span span {
+#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt span span span {
     flex-direction: column;
     justify-content: center;
     margin-left: 0.25em;
@@ -75,63 +77,63 @@
     opacity: 0.2;
 }
 
-#openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_prompt span span:hover {
+#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt span span:hover {
     opacity: 1;
 }
 
-#openai_prompt_manager_popup .openai_prompt_manager_popup_entry {
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry {
     margin-top:2em;
 }
 
-#openai_prompt_manager_popup .openai_prompt_manager_popup_entry .openai_prompt_manager_popup_entry_form_control {
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry .completion_prompt_manager_popup_entry_form_control {
     margin-top:1em;
 }
 
-#openai_prompt_manager_popup #openai_prompt_manager_popup_entry_form_footer #openai_prompt_manager_popup_entry_form_close,
-#openai_prompt_manager_popup #openai_prompt_manager_popup_entry_form_footer #openai_prompt_manager_popup_entry_form_save {
+#completion_prompt_manager_popup #completion_prompt_manager_popup_entry_form_footer #completion_prompt_manager_popup_entry_form_close,
+#completion_prompt_manager_popup #completion_prompt_manager_popup_entry_form_footer #completion_prompt_manager_popup_entry_form_save {
     font-size: 1.25em;
     padding: 0.5em;
 }
 
-#openai_prompt_manager_popup .openai_prompt_manager_popup_entry_form_control #openai_prompt_manager_popup_entry_form_prompt {
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry_form_control #completion_prompt_manager_popup_entry_form_prompt {
     min-height: 200px;
 }
 
-#openai_prompt_manager_popup .openai_prompt_manager_popup_entry #openai_prompt_manager_popup_entry_form_footer {
+#completion_prompt_manager_popup .completion_prompt_manager_popup_entry #completion_prompt_manager_popup_entry_form_footer {
     display: flex;
     justify-content: space-between;
     margin-top: 1em;
 }
 
-#openai_prompt_manager #openai_prompt_manager_list .openai_prompt_manager_prompt.draggable {
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt.draggable {
     cursor: grab;
 }
 
-#openai_prompt_manager #openai_prompt_manager_list .openai_prompt_manager_prompt_name {
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt_name {
     white-space: nowrap;
     overflow: hidden;
 }
 
-#openai_prompt_manager #openai_prompt_manager_list .openai_prompt_manager_prompt.openai_prompt_manager_prompt_disabled {
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt.completion_prompt_manager_prompt_disabled {
     border: 1px solid var(--white20a);
 }
 
-#openai_prompt_manager #openai_prompt_manager_list .openai_prompt_manager_prompt_disabled .openai_prompt_manager_prompt_name {
+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt_disabled .completion_prompt_manager_prompt_name {
     color: var(--white30a);
 }
 
-#openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_prompt .mes_edit {
+#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt .mes_edit {
     margin-left: 0.5em;
 }
 
-#openai_prompt_manager .openai_prompt_manager_error {
+#completion_prompt_manager .completion_prompt_manager_error {
     padding: 1em;
     border: 3px solid var(--fullred);
     margin-top: 1em;
     margin-bottom: 0.5em;
 }
 
-#openai_prompt_manager .openai_prompt_manager_header {
+#completion_prompt_manager .completion_prompt_manager_header {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -141,17 +143,17 @@
     width: 100%
 }
 
-#openai_prompt_manager .openai_prompt_manager_header div {
+#completion_prompt_manager .completion_prompt_manager_header div {
     margin-top: 0.5em;
     width: fit-content;
 }
 
-#openai_prompt_manager .openai_prompt_manager_header_advanced {
+#completion_prompt_manager .completion_prompt_manager_header_advanced {
     display: flex;
     margin-right: 0.25em;
 }
 
-#openai_prompt_manager .openai_prompt_manager_header_advanced span {
+#completion_prompt_manager .completion_prompt_manager_header_advanced span {
     flex-direction: column;
     justify-content: center;
     margin-left: 0.25em;
@@ -160,11 +162,11 @@
     filter: drop-shadow(0px 0px 2px black);
 }
 
-#openai_prompt_manager .openai_prompt_manager_header_advanced span.fa-solid {
+#completion_prompt_manager .completion_prompt_manager_header_advanced span.fa-solid {
     display: inherit;
 }
 
-#openai_prompt_manager .openai_prompt_manager_footer {
+#completion_prompt_manager .completion_prompt_manager_footer {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
@@ -173,15 +175,15 @@
     width: 100%
 }
 
-#openai_prompt_manager .openai_prompt_manager_footer a {
+#completion_prompt_manager .completion_prompt_manager_footer a {
     padding: 5px 5px;
 }
 
-#openai_prompt_manager_popup {
+#completion_prompt_manager_popup {
     margin-top: 0;
 }
 
-#openai_prompt_manager_popup {
+#completion_prompt_manager_popup {
     max-width: var(--sheldWidth);
     height: calc(100% - 40px);
     position: absolute;
@@ -200,11 +202,10 @@
 }
 
 @media screen and (max-width: 412px) {
-    #openai_prompt_manager #openai_prompt_manager_list {
+    #completion_prompt_manager #completion_prompt_manager_list {
         font-size: 1.25em !important;
     }
-    #openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_prompt span span span {
+    #completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt span span span {
         margin-left: 0.5em;
     }
-
 }
diff --git a/public/index.html b/public/index.html
index e162df293..a5f7d2624 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1282,7 +1282,7 @@
                                         </div>
                                     </div>
                                     <div class="range-block">
-                                        <div id="openai_prompt_manager"></div>
+                                        <div id="completion_prompt_manager"></div>
                                     </div>
                                     <div class="range-block">
                                         <div class="range-block-title justifyLeft">
@@ -3575,39 +3575,39 @@
             </div>
         </div>
     </div>
-    <div id="openai_prompt_manager_popup" style="display:none;">
+    <div id="completion_prompt_manager_popup" style="display:none;">
         <h3>OpenAI Prompt Manager Settings</h3>
-        <div class="openai_prompt_manager_popup_entry">
-            <form class="openai_prompt_manager_popup_entry_form">
-                <div class="openai_prompt_manager_popup_entry_form_control">
-                    <label for="openai_prompt_manager_popup_entry_form_name">
+        <div class="completion_prompt_manager_popup_entry">
+            <form class="completion_prompt_manager_popup_entry_form">
+                <div class="completion_prompt_manager_popup_entry_form_control">
+                    <label for="completion_prompt_manager_popup_entry_form_name">
                         <span>Name</span>
                     </label>
                     <div class="text_muted">A name for this prompt.</div>
-                    <input id="openai_prompt_manager_popup_entry_form_name" class="text_pole" type="text" name="name" />
+                    <input id="completion_prompt_manager_popup_entry_form_name" class="text_pole" type="text" name="name" />
                 </div>
-                <div class="openai_prompt_manager_popup_entry_form_control">
-                    <label for="openai_prompt_manager_popup_entry_form_role">
+                <div class="completion_prompt_manager_popup_entry_form_control">
+                    <label for="completion_prompt_manager_popup_entry_form_role">
                         <span>Role</span>
                     </label>
                     <div class="text_muted">To whom this message will be attributed.</div>
-                    <select id="openai_prompt_manager_popup_entry_form_role" class="text_pole" name="role">
+                    <select id="completion_prompt_manager_popup_entry_form_role" class="text_pole" name="role">
                         <option value="system">System</option>
                         <option value="user">User</option>
                         <option value="assistant">AI Assistant</option>
                     </select>
                 </div>
-                <div class="openai_prompt_manager_popup_entry_form_control">
-                    <label for="openai_prompt_manager_popup_entry_form_prompt">
+                <div class="completion_prompt_manager_popup_entry_form_control">
+                    <label for="completion_prompt_manager_popup_entry_form_prompt">
                         <span>Prompt</span>
                     </label>
                     <div class="text_muted">The prompt to be sent.</div>
-                    <textarea id="openai_prompt_manager_popup_entry_form_prompt" class="text_pole" name="prompt">
+                    <textarea id="completion_prompt_manager_popup_entry_form_prompt" class="text_pole" name="prompt">
                     </textarea>
                 </div>
-                <div id="openai_prompt_manager_popup_entry_form_footer" >
-                    <a id="openai_prompt_manager_popup_entry_form_close" class="fa-solid fa-close menu_button"></a>
-                    <a id="openai_prompt_manager_popup_entry_form_save" class="fa-solid fa-save menu_button" data-pm-prompt=""></a>
+                <div id="completion_prompt_manager_popup_entry_form_footer" >
+                    <a id="completion_prompt_manager_popup_entry_form_close" class="fa-solid fa-close menu_button"></a>
+                    <a id="completion_prompt_manager_popup_entry_form_save" class="fa-solid fa-save menu_button" data-pm-prompt=""></a>
                 </div>
             </form>
         </div>
diff --git a/public/script.js b/public/script.js
index 637b6ba0b..4ecb788a8 100644
--- a/public/script.js
+++ b/public/script.js
@@ -90,6 +90,7 @@ import {
     openai_messages_count,
     getTokenCountOpenAI,
     chat_completion_sources,
+    setupClaudePromptManager,
     getTokenizerModel,
     getChatCompletionModel,
 } from "./scripts/openai.js";
@@ -4529,6 +4530,18 @@ function changeMainAPI() {
         getStatus();
         getHordeModels();
     }
+
+    console.log(oai_settings.chat_completion_source)
+    switch (oai_settings.chat_completion_source) {
+        case chat_completion_sources.OPENAI:
+            console.log('Setting up OpenAI prompt manager');
+            setupOpenAIPromptManager(oai_settings);
+            break;
+        case chat_completion_sources.CLAUDE:
+            console.log('Setting up Claude prompt manager');
+            setupClaudePromptManager(oai_settings);
+            break;
+    }
 }
 
 ////////////////////////////////////////////////////
@@ -5121,7 +5134,6 @@ async function getSettings(type) {
 
         // OpenAI
         loadOpenAISettings(data, settings);
-                setupOpenAIPromptManager(settings);
 
         // Horde
         loadHordeSettings(settings);
diff --git a/public/scripts/PromptManager.js b/public/scripts/PromptManager.js
index e0995401a..8d4edee91 100644
--- a/public/scripts/PromptManager.js
+++ b/public/scripts/PromptManager.js
@@ -437,7 +437,7 @@ PromptManagerModule.prototype.handleGroupSelected = function (event) {
 
 PromptManagerModule.prototype.getActiveGroupCharacters = function() {
     // ToDo: Ideally, this should return the actual characters.
-    return (this.activeCharacter.group?.members || []).map(member => member.substring(0, member.lastIndexOf('.')));
+    return (this.activeCharacter?.group?.members || []).map(member => member.substring(0, member.lastIndexOf('.')));
 }
 
 /**
diff --git a/public/scripts/openai.js b/public/scripts/openai.js
index 3c46d5caa..487bc6fda 100644
--- a/public/scripts/openai.js
+++ b/public/scripts/openai.js
@@ -61,6 +61,7 @@ export {
     setOpenAIMessages,
     setOpenAIMessageExamples,
     setupOpenAIPromptManager,
+    setupClaudePromptManager,
     generateOpenAIPromptCache,
     prepareOpenAIMessages,
     sendOpenAIRequest,
@@ -278,9 +279,9 @@ function setOpenAIMessageExamples(mesExamplesArray) {
 function setupOpenAIPromptManager(openAiSettings) {
     promptManager = new PromptManager();
     const configuration = {
-        prefix: 'openai_',
-        containerIdentifier: 'openai_prompt_manager',
-        listIdentifier: 'openai_prompt_manager_list',
+        prefix: 'completion_',
+        containerIdentifier: 'completion_prompt_manager',
+        listIdentifier: 'completion_prompt_manager_list',
         toggleDisabled: ['main'],
         draggable: true
     };
@@ -299,6 +300,10 @@ function setupOpenAIPromptManager(openAiSettings) {
     promptManager.render();
 }
 
+function setupClaudePromptManager(claudeSettings) {
+    setupOpenAIPromptManager(claudeSettings);
+}
+
 function generateOpenAIPromptCache() {
     openai_msgs = openai_msgs.reverse();
     openai_msgs.forEach(function (msg, i, arr) {
@@ -2086,6 +2091,7 @@ async function onModelChange() {
     if ($(this).is('#model_claude_select')) {
         console.log('Claude model changed to', value);
         oai_settings.claude_model = value;
+        //setupOpenAIPromptManager(openai_settings);
     }
 
     if ($(this).is('#model_windowai_select')) {
@@ -2096,6 +2102,7 @@ async function onModelChange() {
     if ($(this).is('#model_openai_select')) {
         console.log('OpenAI model changed to', value);
         oai_settings.openai_model = value;
+        setupOpenAIPromptManager(openai_settings);
     }
 
     if ($(this).is('#model_openrouter_select')) {