fancy expanding api input box

.config/ags/widgets/sideleft/apiwidgets.js

@@ -1,16 +1,28 @@
+const { Gtk, Gdk } = imports.gi;
 import App from 'resource:///com/github/Aylur/ags/app.js';
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import AgsWidget from "resource:///com/github/Aylur/ags/widgets/widget.js";
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
-const { Box, Button, CenterBox, Entry, EventBox, Icon, Label, Revealer, Scrollable, Stack } = Widget;
+const { Box, Button, CenterBox, Entry, EventBox, Icon, Label, Overlay, Revealer, Scrollable, Stack } = Widget;
 const { execAsync, exec } = Utils;
 import { setupCursorHover, setupCursorHoverInfo } from "../../lib/cursorhover.js";
+import { contentStack } from './sideleft.js';
 // APIs
 import ChatGPT from '../../services/chatgpt.js';
 import Gemini from '../../services/gemini.js';
 import { geminiView, geminiCommands, sendMessage as geminiSendMessage, geminiTabIcon } from './apis/gemini.js';
 import { chatGPTView, chatGPTCommands, sendMessage as chatGPTSendMessage, chatGPTTabIcon } from './apis/chatgpt.js';
 import { waifuView, waifuCommands, sendMessage as waifuSendMessage, waifuTabIcon } from './apis/waifu.js';
+class AgsTextView extends AgsWidget(Gtk.TextView, "AgsTextView") {
+    static { AgsWidget.register(this, {}); }
+    constructor(params) {
+        super(params);
+    }
+}
+const TextView = Widget.createCtor(AgsTextView);
 
+
+const EXPAND_INPUT_THRESHOLD = 30;
 const APIS = [
     {
         name: 'Assistant (ChatGPT 3.5)',
@@ -40,9 +52,27 @@ const APIS = [
 let currentApiId = 0;
 APIS[currentApiId].tabIcon.toggleClassName('sidebar-chat-apiswitcher-icon-enabled', true);
 
-export const chatEntry = Entry({
-    className: 'sidebar-chat-entry',
+function apiSendMessage(textView) {
+    // Get text
+    const buffer = textView.get_buffer();
+    const [start, end] = buffer.get_bounds();
+    const text = buffer.get_text(start, end, true).trimStart();
+    if (!text || text.length == 0) return;
+    // Send
+    APIS[currentApiId].sendCommand(text)
+    // Reset
+    Utils.timeout(100, () => {
+        buffer.set_text("", -1);
+        chatEntryWrapper.toggleClassName('sidebar-chat-wrapper-extended', false);
+        chatEntry.set_valign(Gtk.Align.CENTER);
+    });
+}
+
+export const chatEntry = TextView({
     hexpand: true,
+    wrapMode: Gtk.WrapMode.WORD_CHAR,
+    acceptsTab: false,
+    className: 'sidebar-chat-entry',
     setup: (self) => self
         .hook(ChatGPT, (self) => {
             if (APIS[currentApiId].name != 'Assistant (ChatGPT 3.5)') return;
@@ -52,31 +82,66 @@ export const chatEntry = Entry({
             if (APIS[currentApiId].name != 'Assistant (Gemini Pro)') return;
             self.placeholderText = (Gemini.key.length > 0 ? 'Message Gemini...' : 'Enter Google AI API Key...');
         }, 'hasKey')
+        .on("key-press-event", (widget, event) => {
+            const keyval = event.get_keyval()[1];
+            if (event.get_keyval()[1] === Gdk.KEY_Return && event.get_state()[1] == Gdk.ModifierType.MOD2_MASK) {
+                apiSendMessage(widget);
+                return true;
+            }
+            // Global keybinds
+            if (!(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
+                event.get_keyval()[1] === Gdk.KEY_Page_Down) {
+                const toSwitchTab = contentStack.get_visible_child();
+                toSwitchTab.attribute.nextTab();
+            }
+            else if (!(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
+                event.get_keyval()[1] === Gdk.KEY_Page_Up) {
+                const toSwitchTab = contentStack.get_visible_child();
+                toSwitchTab.attribute.prevTab();
+            }
+        })
     ,
-    onChange: (entry) => {
-        chatSendButton.toggleClassName('sidebar-chat-send-available', entry.text.length > 0);
-    },
-    onAccept: (entry) => {
-        APIS[currentApiId].sendCommand(entry.text)
-        entry.text = '';
-    },
+});
+
+chatEntry.get_buffer().connect("changed", (buffer) => {
+    const bufferText = buffer.get_text(buffer.get_start_iter(), buffer.get_end_iter(), true);
+    chatSendButton.toggleClassName('sidebar-chat-send-available', bufferText.length > 0);
+    if (buffer.get_line_count() > 1 || bufferText.length > EXPAND_INPUT_THRESHOLD) {
+        chatEntryWrapper.toggleClassName('sidebar-chat-wrapper-extended', true);
+        chatEntry.set_valign(Gtk.Align.FILL);
+    }
+    else {
+        chatEntryWrapper.toggleClassName('sidebar-chat-wrapper-extended', false);
+        chatEntry.set_valign(Gtk.Align.CENTER);
+    }
+});
+
+const chatEntryWrapper = Scrollable({
+    className: 'sidebar-chat-wrapper',
+    hscroll: 'never',
+    vscroll: 'never',
+    child: chatEntry,
 });
 
 const chatSendButton = Button({
     className: 'txt-norm icon-material sidebar-chat-send',
-    vpack: 'center',
+    vpack: 'end',
     label: 'arrow_upward',
     setup: setupCursorHover,
     onClicked: (self) => {
-        APIS[currentApiId].sendCommand(chatEntry.text);
-        chatEntry.text = '';
+        APIS[currentApiId].sendCommand(chatEntry.get_buffer().text);
+        chatEntry.get_buffer().set_text("", -1);
     },
 });
 
 const textboxArea = Box({ // Entry area
-    className: 'sidebar-chat-textarea spacing-h-10',
+    className: 'sidebar-chat-textarea',
     children: [
-        chatEntry,
+        Overlay({
+            passThrough: true,
+            child: chatEntryWrapper,
+        }),
+        Box({ className: 'width-10' }),
         chatSendButton,
     ]
 });
@@ -97,8 +162,8 @@ function switchToTab(id) {
     APIS[id].tabIcon.toggleClassName('sidebar-chat-apiswitcher-icon-enabled', true);
     apiContentStack.shown = APIS[id].name;
     apiCommandStack.shown = APIS[id].name;
-    chatEntry.placeholderText = APIS[id].placeholderText,
-        currentApiId = id;
+    chatEntry.placeholderText = APIS[id].placeholderText;
+    currentApiId = id;
 }
 
 const apiSwitcher = CenterBox({