Merge pull request #31 from yaacov/history

history

Author: yaacov

uv.lock

@@ -1,6 +1,7 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
 import { appState } from "../state/app-state.js";
+import { InputHistory } from "../utils/input-history.js";
 
 @customElement("chat-composer")
 export class ChatComposer extends LitElement {
@@ -179,6 +180,7 @@ export class ChatComposer extends LitElement {
 
   @query("textarea") private textarea!: HTMLTextAreaElement;
 
+  private history = new InputHistory(this);
   private unsubscribe?: () => void;
 
   connectedCallback() {
@@ -208,10 +210,23 @@ export class ChatComposer extends LitElement {
 
   private handleInput(e: InputEvent) {
     this.text = (e.target as HTMLTextAreaElement).value;
+    this.history.reset();
     this.autoResize();
   }
 
   private handleKeyDown(e: KeyboardEvent) {
+    const result = this.history.handleKeyDown(e, this.textarea, this.text);
+    if (result.handled) {
+      e.preventDefault();
+      this.text = result.text;
+      this.updateComplete.then(() => {
+        this.autoResize();
+        if (this.textarea) {
+          this.textarea.selectionStart = this.textarea.selectionEnd = this.textarea.value.length;
+        }
+      });
+      return;
+    }
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       this.send();
@@ -226,6 +241,7 @@ export class ChatComposer extends LitElement {
     const msg = this.text.trim();
     if (!msg || this.isStreaming) return;
     this.text = "";
+    this.history.reset();
     if (this.textarea) {
       this.textarea.style.height = "auto";
     }

web/src/components/chat-composer.ts

@@ -0,0 +1,71 @@
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+import { appState } from "../state/app-state.js";
+
+export interface HistoryResult {
+  handled: boolean;
+  text: string;
+}
+
+function isCursorOnFirstLine(ta: HTMLTextAreaElement): boolean {
+  return !ta.value.substring(0, ta.selectionStart).includes("\n");
+}
+
+function isCursorOnLastLine(ta: HTMLTextAreaElement): boolean {
+  return !ta.value.substring(ta.selectionEnd).includes("\n");
+}
+
+/**
+ * Lit reactive controller that provides shell-like arrow-up / arrow-down
+ * input history for a textarea.  History entries come from the current
+ * chat's user messages (via appState).
+ */
+export class InputHistory implements ReactiveController {
+  private index = -1;
+  private draft = "";
+
+  constructor(private host: ReactiveControllerHost) {
+    host.addController(this);
+  }
+
+  hostConnected() {}
+  hostDisconnected() {
+    this.reset();
+  }
+
+  private entries(): string[] {
+    return appState.state.messages
+      .filter((m) => m.role === "user")
+      .map((m) => m.content)
+      .reverse();
+  }
+
+  handleKeyDown(
+    e: KeyboardEvent,
+    textarea: HTMLTextAreaElement,
+    currentText: string,
+  ): HistoryResult {
+    const unchanged: HistoryResult = { handled: false, text: currentText };
+
+    if (e.key === "ArrowUp" && isCursorOnFirstLine(textarea)) {
+      const hist = this.entries();
+      if (!hist.length) return unchanged;
+      if (this.index === -1) this.draft = currentText;
+      this.index = Math.min(this.index + 1, hist.length - 1);
+      return { handled: true, text: hist[this.index] };
+    }
+
+    if (e.key === "ArrowDown" && isCursorOnLastLine(textarea)) {
+      if (this.index === -1) return unchanged;
+      this.index -= 1;
+      const text = this.index === -1 ? this.draft : this.entries()[this.index];
+      return { handled: true, text };
+    }
+
+    return unchanged;
+  }
+
+  reset(): void {
+    this.index = -1;
+    this.draft = "";
+  }
+}