merge prep

models.py

@@ -33,6 +33,7 @@ from langchain_core.messages import (
 from langchain.embeddings.base import Embeddings
 
 load_dotenv()
+os.environ['LITELLM_LOG'] = "ERROR" # only errors
 
 
 class ModelType(Enum):

prompts/default/browser_agent.system.md

@@ -4,14 +4,9 @@ Follow instructions as closely as possible
 When told go to website, open the website. If no other instructions: stop there
 Do not interact with the website unless told to
 Always accept all cookies if prompted on the website, NEVER go to browser cookie settings
-In page_summary respond with one paragraph of main content plus an overview of page elements
 If asked specific questions about a website, be as precise and close to the actual page content as possible
 If you are waiting for instructions: you should end the task and mark as done
 
-## Response Format
-Your responses must always be formatted as a JSON object
-The response JSON must contain at least the following fields: "title", "response", "page_summary"
-
 ## Task Completion
 When you have completed the assigned task OR are waiting for further instructions:
 1. Use the "Complete task" action to mark the task as complete
@@ -20,18 +15,8 @@ When you have completed the assigned task OR are waiting for further instruction
 
 ## Important Notes
 - Always call "Complete task" when your objective is achieved
+- In page_summary respond with one paragraph of main content plus an overview of page elements
+- Response field is used to answer to user's task or ask additional questions
 - If you navigate to a website and no further actions are requested, call "Complete task" immediately
 - If you complete any requested interaction (clicking, typing, etc.), call "Complete task"
-- Never leave a task running indefinitely - always conclude with "Complete task"
-
-## Response fields
- *  title (type: str) - The ttitle of the current web page
- *  response (type: str) - Your response to your superior's last request
- *  page_summary (type: str) - Summary of the current web page as requested by superior
-
-## Example response
-{
-  "title": "Google Search",
-  "response": "I have succesfully navigated to the response page.",
-  "page_summary": "The page contains a menu bar with ... and a search input field. Under the search field there are two buttons with ... and ..."
-}
+- Never leave a task running indefinitely - always conclude with "Complete task"

python/api/image_get.py

@@ -1,34 +1,40 @@
 import os
 import re
+from typing import override
 from python.helpers.api import ApiHandler
 from python.helpers import files
 from flask import Request, Response, send_file
 
 
 class ImageGet(ApiHandler):
+
+    @classmethod
+    def get_methods(cls) -> list[str]:
+        return ["GET"]
+
     async def process(self, input: dict, request: Request) -> dict | Response:
-            # input data
-            path = input.get("path", request.args.get("path", ""))
-            if not path:
-                raise ValueError("No path provided")
-            
-            # check if path is within base directory
-            if not files.is_in_base_dir(path):
-                raise ValueError("Path is outside of allowed directory")
-            
-            # check if file has an image extension
-            # list of allowed image extensions
-            allowed_extensions = [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp", ".svg"]
-            # get file extension
-            file_ext = os.path.splitext(path)[1].lower()
-            if file_ext not in allowed_extensions:
-                raise ValueError(f"File type not allowed. Allowed types: {', '.join(allowed_extensions)}")
-            
-            # check if file exists
-            if not os.path.exists(path):
-                raise ValueError("File not found")
-            
-            # send file
-            return send_file(path)
-
-            
+        # input data
+        path = input.get("path", request.args.get("path", ""))
+        if not path:
+            raise ValueError("No path provided")
+
+        # check if path is within base directory
+        if not files.is_in_base_dir(path):
+            raise ValueError("Path is outside of allowed directory")
+
+        # check if file has an image extension
+        # list of allowed image extensions
+        allowed_extensions = [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp", ".svg"]
+        # get file extension
+        file_ext = os.path.splitext(path)[1].lower()
+        if file_ext not in allowed_extensions:
+            raise ValueError(
+                f"File type not allowed. Allowed types: {', '.join(allowed_extensions)}"
+            )
+
+        # check if file exists
+        if not os.path.exists(path):
+            raise ValueError("File not found")
+
+        # send file
+        return send_file(path)

python/tools/code_execution_tool.py

@@ -219,7 +219,7 @@ class CodeExecution(Tool):
         while True:
             await asyncio.sleep(sleep_time)
             full_output, partial_output = await self.state.shells[session].read_output(
-                timeout=3, reset_full_output=reset_full_output
+                timeout=1, reset_full_output=reset_full_output
             )
             reset_full_output = False  # only reset once
 

run_ui.py

@@ -131,7 +131,9 @@ def csrf_protect(f):
     async def decorated(*args, **kwargs):
         token = session.get("csrf_token")
         header = request.headers.get("X-CSRF-Token")
-        if not token or not header or token != header:
+        cookie = request.cookies.get("csrf_token")
+        sent = header or cookie
+        if not token or not sent or token != sent:
             return Response("CSRF token missing or invalid", 403)
         return await f(*args, **kwargs)
 

webui/components/messages/resize/message-resize-store.js

@@ -0,0 +1,85 @@
+import { createStore } from "/js/AlpineStore.js";
+import { toggleCssProperty } from "/js/css.js";
+
+const model = {
+  settings: {},
+
+  async init() {
+    this.settings =
+      JSON.parse(localStorage.getItem("messageResizeSettings") || "null") ||
+      this._getDefaultSettings();
+    this._applyAllSettings();
+  },
+
+  _getDefaultSettings() {
+    return {
+      "message-agent": { minimized: true, maximized: false },
+      "messsage-code-exec": { minimized: false, maximized: false },
+    };
+  },
+
+  _getSetting(className) {
+    return this.settings[className] || { minimized: false, maximized: false };
+  },
+
+  _getDefaultSetting() {
+    return { minimized: false, maximized: false };
+  },
+
+  _setSetting(className, setting) {
+    this.settings[className] = setting;
+    localStorage.setItem(
+      "messageResizeSettings",
+      JSON.stringify(this.settings)
+    );
+  },
+
+  _applyAllSettings() {
+    for (const [className, setting] of Object.entries(this.settings)) {
+      this._applySetting(className, setting);
+    }
+  },
+
+  async minimizeMessageClass(className, event) {
+    const set = this._getSetting(className);
+    set.minimized = !set.minimized;
+    this._setSetting(className, set);
+    this._applySetting(className, set);
+    this._applyScroll(event);
+  },
+
+  async maximizeMessageClass(className, event) {
+    const set = this._getSetting(className);
+    if (set.minimized) return this.minimizeMessageClass(className, event); // if minimized, unminimize first
+    set.maximized = !set.maximized;
+    this._setSetting(className, set);
+    this._applySetting(className, set);
+    this._applyScroll(event);
+  },
+
+  _applyScroll(event) {
+    event.target.scrollIntoView({ behavior: "smooth" });
+  },
+
+  _applySetting(className, setting) {
+    toggleCssProperty(
+      `.${className} .message-body`,
+      "max-height",
+      setting.maximized ? undefined : "30em"
+    );
+    toggleCssProperty(
+      `.${className} .message-body`,
+      "overflow-y",
+      setting.maximized ? undefined : "auto"
+    );
+    toggleCssProperty(
+      `.${className} .message-body`,
+      "display",
+      setting.minimized ? "none" : "block"
+    );
+  },
+};
+
+const store = createStore("messageResize", model);
+
+export { store };

webui/index.css

@@ -689,6 +689,18 @@ pre {
   background-color: #4b3a69;
 }
 
+.message-code-exe .message-body {
+  min-height: 5em;
+  background-color: var(--color-panel);
+  border-radius: 0.5em;
+  margin: 0.3em;
+  padding: 0.3em;
+}
+
+.light-mode .message-code-exe .message-body {
+  border: 1px solid var(--color-border);
+}
+
 .message-browser {
   background-color: #4b3a69;
 }
@@ -725,6 +737,11 @@ pre {
   width: 100%;
 }
 
+.kvps-val pre {
+  white-space: pre-wrap; /* keep \n, collapse no spaces, allow wrapping */
+  word-break: break-word; /* optional – forces really long “words” to break */
+}
+
 .msg-kvps th,
 .msg-kvps td {
   align-content: center;
@@ -744,6 +761,9 @@ pre {
 
 .msg-heading {
   margin: 0;
+  padding-right: 5.5em; /* space for buttons */
+  position: relative;
+  display: block;
 }
 
 /* Message Actions */
@@ -1735,6 +1755,9 @@ input:checked + .slider:before {
 
   .kvps-val {
     margin: 0 0 0.4rem 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-wrap: anywhere;
   }
 }
 
@@ -3081,3 +3104,12 @@ nav ul li a img {
   border: 1px solid rgba(142, 142, 142, 0.1);
   border-radius: 0.3em;
 }
+
+.msg-min-max-btns {
+  position: absolute;
+  top: -0.2em;
+  right: -0.5em;
+  display: flex;
+  gap: 0.3em;
+  z-index: 1;
+}

webui/index.html

@@ -118,6 +118,10 @@
     <script defer src="vendor/katex/katex.auto-render.min.js"
         crossorigin="anonymous"></script>
 
+    <!-- Google Icons -->
+    <link rel="stylesheet" href="vendor/google/google-icons.css" />
+    
+
     <!-- Non-module scripts after Alpine.js -->
     <script type="text/javascript" src="js/settings.js"></script>
     <script type="text/javascript" src="js/file_browser.js"></script>

webui/js/api.js

@@ -79,5 +79,6 @@ async function getCsrfToken() {
     credentials: "same-origin",
   }).then((r) => r.json());
   csrfToken = response.token;
+  document.cookie = "csrf_token=" + csrfToken + "; SameSite=Strict; Path=/";
   return csrfToken;
-}
+}

webui/js/css.js

@@ -0,0 +1,50 @@
+// Create and keep a reference to a dynamic stylesheet for runtime CSS changes
+let dynamicStyleSheet;
+{
+  const style = document.createElement("style");
+  style.appendChild(document.createTextNode(""));
+  document.head.appendChild(style);
+  dynamicStyleSheet = style.sheet;
+}
+
+export function toggleCssProperty(selector, property, value) {
+  // Get the stylesheet that contains the class
+  const styleSheets = document.styleSheets;
+
+  // Iterate through all stylesheets to find the class
+  for (let i = 0; i < styleSheets.length; i++) {
+    const styleSheet = styleSheets[i];
+    let rules;
+    try {
+      rules = styleSheet.cssRules || styleSheet.rules;
+    } catch (e) {
+      // Skip stylesheets we cannot access due to CORS/security restrictions
+      continue;
+    }
+    if (!rules) continue;
+
+    for (let j = 0; j < rules.length; j++) {
+      const rule = rules[j];
+      if (rule.selectorText == selector) {
+        _applyCssToRule(rule, property, value);
+        return;
+      }
+    }
+  }
+  // If not found, add it to the dynamic stylesheet
+  const ruleIndex = dynamicStyleSheet.insertRule(
+    `${selector} {}`,
+    dynamicStyleSheet.cssRules.length
+  );
+  const rule = dynamicStyleSheet.cssRules[ruleIndex];
+  _applyCssToRule(rule, property, value);
+}
+
+// Helper to apply/remove a CSS property on a rule
+function _applyCssToRule(rule, property, value) {
+    if (value === undefined) {
+      rule.style.removeProperty(property);
+    } else {
+      rule.style.setProperty(property, value);
+    }
+  }

webui/js/messages.js

@@ -1,6 +1,7 @@
 // copy button
 import { openImageModal } from "./image_modal.js";
 import { marked } from "../vendor/marked/marked.esm.js";
+import { store as messageResizeStore } from "/components/messages/resize/message-resize-store.js";
 
 function createCopyButton() {
   const button = document.createElement("button");
@@ -81,23 +82,39 @@ export function _drawMessage(
   content,
   temp,
   followUp,
+  mainClass = "",
   kvps = null,
   messageClasses = [],
   contentClasses = [],
   latex = false,
-  markdown = false
+  markdown = false,
+  resizeBtns = true
 ) {
   const messageDiv = document.createElement("div");
-  messageDiv.classList.add("message", ...messageClasses);
+  messageDiv.classList.add("message", mainClass, ...messageClasses);
 
   if (heading) {
     const headingElement = document.createElement("h4");
     headingElement.classList.add("msg-heading");
     headingElement.textContent = heading;
     messageDiv.appendChild(headingElement);
+
+    if (resizeBtns) {
+      const minMaxBtn = document.createElement("div");
+      minMaxBtn.classList.add("msg-min-max-btns");
+      minMaxBtn.innerHTML = `
+        <a href="#" class="msg-min-max-btn" @click.prevent="$store.messageResize.minimizeMessageClass('${mainClass}', $event)"><span class="material-symbols-outlined">minimize</span></a>
+        <a href="#" class="msg-min-max-btn" @click.prevent="$store.messageResize.maximizeMessageClass('${mainClass}', $event)"><span class="material-symbols-outlined">expand_all</span></a>
+      `;
+      headingElement.appendChild(minMaxBtn);
+    }
   }
 
-  drawKvps(messageDiv, kvps, false);
+  const bodyDiv = document.createElement("div");
+  bodyDiv.classList.add("message-body");
+  messageDiv.appendChild(bodyDiv);
+
+  drawKvps(bodyDiv, kvps, false);
 
   if (content && content.trim().length > 0) {
     if (markdown) {
@@ -124,7 +141,7 @@ export function _drawMessage(
 
       contentDiv.appendChild(spanElement);
       addCopyButtonToElement(contentDiv);
-      messageDiv.appendChild(contentDiv);
+      bodyDiv.appendChild(contentDiv);
     } else {
       const preElement = document.createElement("pre");
       preElement.classList.add("msg-content", ...contentClasses);
@@ -141,7 +158,7 @@ export function _drawMessage(
 
       preElement.appendChild(spanElement);
       addCopyButtonToElement(preElement);
-      messageDiv.appendChild(preElement);
+      bodyDiv.appendChild(preElement);
     }
   }
 
@@ -151,6 +168,11 @@ export function _drawMessage(
     messageContainer.classList.add("message-followup");
   }
 
+  // autoscroll the body if needed
+  setTimeout(() => {
+    bodyDiv.scrollTop = bodyDiv.scrollHeight;
+  }, 0);
+
   return messageDiv;
 }
 
@@ -169,8 +191,9 @@ export function drawMessageDefault(
     content,
     temp,
     false,
+    "message-default",
     kvps,
-    ["message-ai", "message-default"],
+    ["message-ai"],
     ["msg-json"],
     false,
     false
@@ -198,8 +221,9 @@ export function drawMessageAgent(
     content,
     temp,
     false,
+    "message-agent",
     kvpsFlat,
-    ["message-ai", "message-agent"],
+    ["message-ai"],
     ["msg-json"],
     false,
     false
@@ -221,8 +245,9 @@ export function drawMessageResponse(
     content,
     temp,
     true,
+    "message-agent-response",
     null,
-    ["message-ai", "message-agent-response"],
+    ["message-ai"],
     [],
     true,
     true
@@ -244,8 +269,9 @@ export function drawMessageDelegation(
     content,
     temp,
     true,
+    "message-agent-delegation",
     kvps,
-    ["message-ai", "message-agent", "message-agent-delegation"],
+    ["message-ai", "message-agent"],
     [],
     true,
     false
@@ -364,8 +390,9 @@ export function drawMessageTool(
     content,
     temp,
     true,
+    "message-tool",
     kvps,
-    ["message-ai", "message-tool"],
+    ["message-ai"],
     ["msg-output"],
     false,
     false
@@ -387,8 +414,9 @@ export function drawMessageCodeExe(
     content,
     temp,
     true,
+    "message-code-exe",
     null,
-    ["message-ai", "message-code-exe"],
+    ["message-ai"],
     [],
     false,
     false
@@ -410,8 +438,9 @@ export function drawMessageBrowser(
     content,
     temp,
     true,
+    "message-browser",
     kvps,
-    ["message-ai", "message-browser"],
+    ["message-ai"],
     ["msg-json"],
     false,
     false
@@ -419,7 +448,7 @@ export function drawMessageBrowser(
 }
 
 export function drawMessageAgentPlain(
-  classes,
+  mainClass,
   messageContainer,
   id,
   type,
@@ -434,8 +463,9 @@ export function drawMessageAgentPlain(
     content,
     temp,
     false,
+    mainClass,
     kvps,
-    [...classes],
+    [],
     [],
     false,
     false
@@ -453,7 +483,7 @@ export function drawMessageInfo(
   kvps = null
 ) {
   return drawMessageAgentPlain(
-    ["message-info"],
+    "message-info",
     messageContainer,
     id,
     type,
@@ -479,8 +509,9 @@ export function drawMessageUtil(
     content,
     temp,
     false,
+    "message-util",
     kvps,
-    ["message-util"],
+    [],
     ["msg-json"],
     false,
     false
@@ -498,7 +529,7 @@ export function drawMessageWarning(
   kvps = null
 ) {
   return drawMessageAgentPlain(
-    ["message-warning"],
+    "message-warning",
     messageContainer,
     id,
     type,
@@ -519,7 +550,7 @@ export function drawMessageError(
   kvps = null
 ) {
   return drawMessageAgentPlain(
-    ["message-error"],
+    "message-error",
     messageContainer,
     id,
     type,
@@ -537,7 +568,8 @@ function drawKvps(container, kvps, latex) {
     for (let [key, value] of Object.entries(kvps)) {
       const row = table.insertRow();
       row.classList.add("kvps-row");
-      if (key === "thoughts" || key === "reasoning") // TODO: find a better way to determine special class assignment
+      if (key === "thoughts" || key === "reasoning")
+        // TODO: find a better way to determine special class assignment
         row.classList.add("msg-thoughts");
 
       const th = row.insertCell();
@@ -557,6 +589,11 @@ function drawKvps(container, kvps, latex) {
         addValue(value);
       }
 
+      // autoscroll the KVP value if needed
+      setTimeout(() => {
+        tdiv.scrollTop = tdiv.scrollHeight;
+      }, 0);
+
       function addValue(value) {
         if (typeof value === "object") value = JSON.stringify(value, null, 2);
 
@@ -572,7 +609,6 @@ function drawKvps(container, kvps, latex) {
           imgElement.addEventListener("click", () => {
             openImageModal(imgElement.src, 1000);
           });
-
         } else {
           const pre = document.createElement("pre");
           // pre.classList.add("kvps-val");
@@ -588,14 +624,14 @@ function drawKvps(container, kvps, latex) {
             copyText(span.textContent, span);
           });
 
-      // KaTeX rendering for markdown
-      if (latex) {
-        span.querySelectorAll("latex").forEach((element) => {
-          katex.render(element.innerHTML, element, {
-            throwOnError: false,
-          });
-        });
-      }
+          // KaTeX rendering for markdown
+          if (latex) {
+            span.querySelectorAll("latex").forEach((element) => {
+              katex.render(element.innerHTML, element, {
+                throwOnError: false,
+              });
+            });
+          }
         }
       }
       //   } else {

webui/vendor/google/google-icons.css

@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  font-weight: 400;
+  src: url(./google-icons.ttf) format('truetype');
+}
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+}

webui/vendor/google/google-icons.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:17d893530b09a73505a9f0358db6ac33c0584b7a6fce20157eceeccee0890830
+size 867212