build: added icons to UI tabs.

mmiscool · Dec 10, 2024 · 2d5cc46 · 2d5cc46
1 parent fc95a31
commit 2d5cc46
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/public/ChatManager.js b/public/ChatManager.js
@@ -226,6 +226,19 @@ export class ChatManager {
         this.userInput.style.padding = '5px';
         // set a hint that shows in the empty field. 
         this.userInput.placeholder = "Tell me what you want, what you really really want...";
+        this.userInput.addEventListener('keydown', function (event) {
+            if (event.key === 'Tab') {
+                event.preventDefault(); // Prevent the default tab behavior
+                const start = this.selectionStart;
+                const end = this.selectionEnd;
+
+                // Insert a tab character at the cursor's position
+                this.value = this.value.substring(0, start) + '    ' + this.value.substring(end);
+
+                // Move the cursor to the correct position after the tab
+                this.selectionStart = this.selectionEnd = start + 4;
+            }
+        });
         this.container.appendChild(this.userInput);
 
         // add button to submit user input

diff --git a/public/main.js b/public/main.js
@@ -11,16 +11,16 @@ async function setup() {
     ctx.autoApplyTimeout = 3;
     const tabs = new tabInterface();
     ctx.tabs = tabs;
-    const chatTab = tabs.createTab("Chat");
+    const chatTab = tabs.createTab("Chat","💬");
     ctx.chat = new ChatManager(chatTab, ctx);
 
-    const toolsTab = tabs.createTab("Tools");
+    const toolsTab = tabs.createTab("Tools","🛠️");
     ctx.tools = new toolsManager(toolsTab, ctx);
 
-    const projectSettings = tabs.createTab("Project Settings");
+    const projectSettings = tabs.createTab("Project Settings","⚙️");
     ctx.projectSettings = new ProjectSettingsManager(projectSettings, ctx);
 
-    const llmSettingsTab = tabs.createTab("LLM Settings");
+    const llmSettingsTab = tabs.createTab("LLM Settings","🧠");
     ctx.llmSettings = new LLMSettingsManager(llmSettingsTab, ctx);
 
     document.body.style.margin = "0";

diff --git a/public/tabInterface.js b/public/tabInterface.js
@@ -24,24 +24,28 @@ export class tabInterface {
         this.tabBar = document.createElement("div");
         this.tabBar.style.height = "50px";
         this.tabBar.style.display = "flex";
+        this.tabBar.style.flexDirection = "row"
         this.tabBar.style.backgroundColor = this.colors.tabBarBackground;
         this.tabBar.style.borderBottom = `2px solid ${this.colors.inactiveTabBorder}`;
         this.container.appendChild(this.tabBar);
 
         // Create the content area
         this.contentArea = document.createElement("div");
         this.contentArea.style.flexGrow = "1";
-        this.contentArea.style.overflow = "auto";
+        this.contentArea.style.overflow = "scroll";
         this.container.appendChild(this.contentArea);
     }
 
-    createTab(name) {
+    createTab(name, icon) {
         const tabIndex = this.tabs.length;
 
         // Create the tab button
         const tabButton = document.createElement("button");
-        tabButton.textContent = name;
-        tabButton.style.flexGrow = "1";
+        tabButton.textContent = icon + " " + name;
+        // add tooltip
+        tabButton.title = name;
+        //tabButton.style.flexGrow = "1";
+
         tabButton.style.border = "none";
         tabButton.style.backgroundColor = this.colors.tabButtonBackground;
         tabButton.style.cursor = "pointer";