Merge pull request #42 from beekeeper-studio/fix/input-history

Fix/input history

Author: azmy60

src/components/ChatInterface.vue

@@ -68,46 +68,8 @@
       <span class="material-symbols-outlined">keyboard_arrow_down</span>
     </button>
     <div class="chat-input-container-container">
-      <div class="chat-input-container">
-        <BaseInput
-          type="textarea"
-          v-model="input"
-          @keydown.enter="handleEnterKey"
-          @keydown.up="handleUpArrow"
-          @keydown.down="handleDownArrow"
-          placeholder="Type your message here..."
-          rows="1"
-        />
-        <div class="actions">
-          <Dropdown
-            :model-value="model"
-            placeholder="Select Model"
-            aria-label="Model"
-          >
-            <DropdownOption
-              v-for="optionModel in filteredModels"
-              :key="optionModel.id"
-              :value="optionModel.id"
-              :text="optionModel.id"
-              :selected="matchModel(optionModel, model)"
-              @select="selectModel(optionModel)"
-            />
-            <div class="dropdown-separator"></div>
-            <button class="dropdown-action" @click="$emit('manage-models')">
-              Manage models
-            </button>
-          </Dropdown>
-          <button
-            v-if="canSendMessage"
-            @click="submit"
-            class="submit-btn"
-            :disabled="!input.trim()"
-          >
-            <span class="material-symbols-outlined">send</span>
-          </button>
-          <button v-else @click="stop" class="stop-btn" />
-        </div>
-      </div>
+      <PromptInput storage-key="inputHistory" :processing="processing" :selected-model="model"
+       @select-model="selectModel" @manage-models="$emit('manage-models')" @submit="submit" @stop="stop"  />
     </div>
   </div>
 </template>
@@ -126,10 +88,8 @@ import { PropType } from "vue";
 import { mapActions, mapGetters, mapState, mapWritableState } from "pinia";
 import { RootBinding } from "@/plugins/appEvent";
 import { useInternalDataStore } from "@/stores/internalData";
-import { matchModel } from "@/utils";
 import BaseInput from "@/components/common/BaseInput.vue";
-
-const maxHistorySize = 50;
+import PromptInput from "@/components/common/PromptInput.vue";
 
 export default {
   name: "ChatInterface",
@@ -141,6 +101,7 @@ export default {
     ToolMessage,
     Markdown,
     BaseInput,
+    PromptInput,
   },
 
   emits: ["manage-models", "open-configuration"],
@@ -167,7 +128,6 @@ export default {
       send: ai.send,
       abort: ai.abort,
       messages: ai.messages,
-      input: ai.input,
       error: ai.error,
       status: ai.status,
       pendingToolCallIds: ai.pendingToolCallIds,
@@ -179,13 +139,7 @@ export default {
   },
 
   data() {
-    const inputHistoryStr = localStorage.getItem("inputHistory") || "[]";
-    const inputHistory = JSON.parse(inputHistoryStr);
     return {
-      tempInput: "",
-      inputHistory,
-      historyIndex: inputHistory.length,
-      isNavigatingHistory: false,
       isAtBottom: true,
       showFullError: false,
       noModelError: false,
@@ -195,14 +149,9 @@ export default {
   computed: {
     ...mapGetters(useChatStore, ["systemPrompt"]),
     ...mapWritableState(useChatStore, ["model"]),
-    ...mapState(useChatStore, {
-      filteredModels(store) {
-        return store.models.filter((m) => m.enabled);
-      },
-    }),
-    canSendMessage() {
-      if (this.askingPermission && this.input.trim().length > 0) return true;
-      return this.status === "ready" || this.status === "error";
+    processing() {
+      if (this.askingPermission) return false;
+      return this.status !== "ready" && this.status !== "error";
     },
     showSpinner() {
       return (
@@ -272,148 +221,27 @@ export default {
 
   methods: {
     ...mapActions(useInternalDataStore, ["setInternal"]),
-    matchModel,
-    handleEnterKey(e) {
-      if (e.shiftKey) {
-        // Allow default behavior (new line) when Shift+Enter is pressed
-        return;
-      }
-
-      if (this.canSendMessage) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.submit();
-      }
-    },
-
-    // Handle up/down arrow keys for history navigation
-    handleUpArrow(e) {
-      const textarea = e.target;
-      const text = textarea.value;
-
-      // Is cursor at first line?
-      const cursorPos = textarea.selectionStart;
-      const textBeforeCursor = text.substring(0, cursorPos);
-
-      // If there's no newline before cursor or cursor is at position 0, we're at the first line
-      if (
-        (cursorPos === 0 || textBeforeCursor.lastIndexOf("\n") === -1) &&
-        this.historyIndex > 0
-      ) {
-        e.preventDefault();
-        this.navigateHistory(-1); // Go back in history
-      }
-    },
-
-    handleDownArrow(e) {
-      const textarea = e.target;
-      const text = textarea.value;
-
-      // Is cursor at last line?
-      const cursorPos = textarea.selectionStart;
-      const textAfterCursor = text.substring(cursorPos);
-
-      // If there's no newline after cursor or cursor is at end of text, we're at the last line
-      if (
-        (cursorPos === text.length || textAfterCursor.indexOf("\n") === -1) &&
-        this.historyIndex < this.inputHistory.length - 1
-      ) {
-        e.preventDefault();
-        this.navigateHistory(1); // Go forward in history
-      }
-    },
-
-    // Navigate through input history
-    navigateHistory(direction) {
-      // If no history or navigating beyond bounds, do nothing
-      if (this.inputHistory.length === 0) return;
-
-      if (this.historyIndex === 0 && direction === -1) return;
-
-      if (
-        this.historyIndex >= this.inputHistory.length - 1 &&
-        direction === 1
-      ) {
-        // We are at the last history item
-        this.historyIndex = this.inputHistory.length;
-        this.input = this.tempInput;
-        this.isNavigatingHistory = false;
-        return;
-      }
-
-      if (!this.isNavigatingHistory) {
-        // save current input before navigating
-        this.tempInput = this.input;
-        this.isNavigatingHistory = true;
-      }
-
-      // Calculate new index
-      const newIndex = this.historyIndex + direction;
-
-      this.input = this.inputHistory[newIndex];
-
-      this.historyIndex = newIndex;
-
-      // Place cursor at the end of the input text
-      this.$nextTick(() => {
-        const textarea = document.querySelector("textarea");
-        if (textarea) {
-          textarea.selectionStart = textarea.selectionEnd =
-            textarea.value.length;
-        }
-      });
-    },
-
-    submit() {
-      const message = this.input.trim();
-
-      // Don't send empty messages
-      if (!message) return;
 
+    submit(input: string) {
       if (!this.model) {
         // FIXME we should catch this and show it on screen
         this.noModelError = true;
         return;
       }
 
-      this.addToHistory(message);
-
       this.noModelError = false;
-      this.tempInput = "";
-      this.input = "";
 
       if (this.askingPermission) {
-        this.rejectPermission(message);
+        this.rejectPermission(input);
       } else {
-        this.send(message, this.getSendOptions());
+        this.send(input, this.getSendOptions());
       }
     },
 
     async reload() {
       await this.retry(this.getSendOptions());
     },
 
-    addToHistory(input: string) {
-      const oldHistory = JSON.parse(localStorage.getItem("inputHistory")!);
-
-      let newHistory = [...this.inputHistory, input];
-      if (this.historyIndex < this.inputHistory.length) {
-        newHistory[this.historyIndex] = oldHistory[this.historyIndex];
-      }
-
-      // Limit history size
-      if (newHistory.length > maxHistorySize) {
-        newHistory = newHistory.slice(-maxHistorySize);
-      }
-
-      localStorage.setItem("inputHistory", JSON.stringify(newHistory));
-
-      // Reset history navigation
-      this.inputHistory = newHistory;
-      this.historyIndex = newHistory.length;
-      this.isNavigatingHistory = false;
-    },
-
     stop() {
       if (this.askingPermission) {
         this.rejectPermission();
@@ -436,6 +264,7 @@ export default {
           this.$refs.scrollContainerRef.scrollHeight;
       }
     },
+
     selectModel(model: Model) {
       this.setInternal("lastUsedModelId", model.id);
       this.model = model;