messages redesign wip

agent.py

@@ -300,7 +300,7 @@ class Agent:
 
         # non-config vars
         self.number = number
-        self.agent_name = f"Agent {self.number}"
+        self.agent_name = f"A{self.number}"
 
         self.history = history.History(self)
         self.last_user_message: history.Message | None = None
@@ -333,19 +333,8 @@ class Agent:
                         # prepare LLM chain (model, system, history)
                         prompt = await self.prepare_prompt(loop_data=self.loop_data)
 
-                        # output that the agent is starting
-                        PrintStyle(
-                            bold=True,
-                            font_color="green",
-                            padding=True,
-                            background_color="white",
-                        ).print(f"{self.agent_name}: Generating")
-                        # create log message right away, more responsive
-                        self.loop_data.params_temporary["log_item_generating"] = (
-                            self.context.log.log(
-                                type="agent", heading=f"{self.agent_name}: Generating..."
-                            )
-                        )
+                        # call before_main_llm_call extensions
+                        await self.call_extensions("before_main_llm_call", loop_data=self.loop_data)
 
                         async def reasoning_callback(chunk: str, full: str):
                             if chunk == full:
@@ -360,6 +349,7 @@ class Agent:
                             printer.stream(chunk)
                             await self.handle_response_stream(full)
 
+                        # call main LLM
                         agent_response, _reasoning = await self.call_chat_model(
                             messages=prompt,
                             response_callback=stream_callback,

python/extensions/before_main_llm_call/_10_log_for_stream.py

@@ -0,0 +1,26 @@
+from python.helpers import persist_chat, tokens
+from python.helpers.extension import Extension
+from agent import LoopData
+import asyncio
+from python.helpers.log import LogItem
+from python.helpers import log
+import math
+
+
+class LogForStream(Extension):
+
+    async def execute(self, loop_data: LoopData = LoopData(), text: str = "", **kwargs):
+        # create log message and store it in loop data temporary params
+        if "log_item_generating" not in loop_data.params_temporary:
+            loop_data.params_temporary["log_item_generating"] = (
+                self.agent.context.log.log(
+                    type="agent",
+                    heading=build_default_heading(self.agent),
+                )
+            )
+
+def build_heading(agent, text: str):
+    return f"icon://network_intelligence {agent.agent_name}: {text}"
+
+def build_default_heading(agent):
+    return build_heading(agent, "Generating...") 

python/extensions/message_loop_prompts_after/_50_recall_memories.py

@@ -5,6 +5,7 @@ from agent import LoopData
 
 DATA_NAME_TASK = "_recall_memories_task"
 
+
 class RecallMemories(Extension):
 
     INTERVAL = 3
@@ -16,13 +17,14 @@ class RecallMemories(Extension):
 
         # every 3 iterations (or the first one) recall memories
         if loop_data.iteration % RecallMemories.INTERVAL == 0:
-            task = asyncio.create_task(self.search_memories(loop_data=loop_data, **kwargs))
+            task = asyncio.create_task(
+                self.search_memories(loop_data=loop_data, **kwargs)
+            )
         else:
             task = None
 
         # set to agent to be able to wait for it
         self.agent.set_data(DATA_NAME_TASK, task)
-            
 
     async def search_memories(self, loop_data: LoopData, **kwargs):
 
@@ -32,12 +34,8 @@ class RecallMemories(Extension):
             del extras["memories"]
 
         # try:
-        # show temp info message
-        self.agent.context.log.log(
-            type="info", content="Searching memories...", temp=True
-        )
-
-        # show full util message, this will hide temp message immediately if turned on
+        
+        # show full util message
         log_item = self.agent.context.log.log(
             type="util",
             heading="Searching memories...",
@@ -47,7 +45,7 @@ class RecallMemories(Extension):
         # msgs_text = self.agent.concat_messages(
         #     self.agent.history[-RecallMemories.HISTORY :]
         # )  # only last X messages
-        msgs_text = self.agent.history.output_text()[-RecallMemories.HISTORY:]
+        msgs_text = self.agent.history.output_text()[-RecallMemories.HISTORY :]
         system = self.agent.read_prompt(
             "memory.memories_query.sys.md", history=msgs_text
         )
@@ -59,7 +57,9 @@ class RecallMemories(Extension):
         # call util llm to summarize conversation
         query = await self.agent.call_utility_model(
             system=system,
-            message=loop_data.user_message.output_text() if loop_data.user_message else "",
+            message=(
+                loop_data.user_message.output_text() if loop_data.user_message else ""
+            ),
             callback=log_callback,
         )
 

python/extensions/message_loop_prompts_after/_51_recall_solutions.py

@@ -32,12 +32,8 @@ class RecallSolutions(Extension):
             del extras["solutions"]
         
         # try:
-        # show temp info message
-        self.agent.context.log.log(
-            type="info", content="Searching memory for solutions...", temp=True
-        )
 
-        # show full util message, this will hide temp message immediately if turned on
+        # show full util message
         log_item = self.agent.context.log.log(
             type="util",
             heading="Searching memory for solutions...",

python/extensions/monologue_end/_50_memorize_fragments.py

@@ -13,12 +13,7 @@ class MemorizeMemories(Extension):
     async def execute(self, loop_data: LoopData = LoopData(), **kwargs):
         # try:
 
-        # show temp info message
-        self.agent.context.log.log(
-            type="info", content="Memorizing new information...", temp=True
-        )
-
-        # show full util message, this will hide temp message immediately if turned on
+        # show full util message
         log_item = self.agent.context.log.log(
             type="util",
             heading="Memorizing new information...",

python/extensions/monologue_end/_51_memorize_solutions.py

@@ -12,13 +12,8 @@ class MemorizeSolutions(Extension):
 
     async def execute(self, loop_data: LoopData = LoopData(), **kwargs):
         # try:
-
-        # show temp info message
-        self.agent.context.log.log(
-            type="info", content="Memorizing succesful solutions...", temp=True
-        )
-
-        # show full util message, this will hide temp message immediately if turned on
+ 
+        # show full util message
         log_item = self.agent.context.log.log(
             type="util",
             heading="Memorizing succesful solutions...",

python/extensions/reasoning_stream/_10_log_from_stream.py

@@ -5,15 +5,15 @@ import asyncio
 from python.helpers.log import LogItem
 from python.helpers import log
 import math
-
+from python.extensions.before_main_llm_call._10_log_for_stream import build_heading, build_default_heading
 
 class LogFromStream(Extension):
 
     async def execute(self, loop_data: LoopData = LoopData(), text: str = "", **kwargs):
 
         # thought length indicator
-        length = math.ceil(len(text) / 10) * 10
-        heading = f"{self.agent.agent_name}: Reasoning ({length})..."
+        pipes = "|" * math.ceil(math.sqrt(len(text)))
+        heading = build_heading(self.agent, f"Reasoning.. {pipes}")
 
         # create log message and store it in loop data temporary params
         if "log_item_generating" not in loop_data.params_temporary:

python/extensions/response_stream/_10_log_from_stream.py

@@ -5,6 +5,7 @@ import asyncio
 from python.helpers.log import LogItem
 from python.helpers import log
 import math
+from python.extensions.before_main_llm_call._10_log_for_stream import build_heading, build_default_heading
 
 
 class LogFromStream(Extension):
@@ -17,17 +18,17 @@ class LogFromStream(Extension):
         **kwargs,
     ):
 
-        heading = f"{self.agent.agent_name}: Generating..."
+        heading = build_default_heading(self.agent)
         if "headline" in parsed:
-            heading = f"{self.agent.agent_name}: {parsed['headline']}"
+            heading = build_heading(self.agent, parsed['headline'])
         elif "thoughts" in parsed:
             # thought length indicator
             thoughts = "\n".join(parsed["thoughts"])
-            length = math.ceil(len(thoughts) / 10) * 10
-            heading = f"{self.agent.agent_name}: Thinking ({length})..."
+            pipes = "|" * math.ceil(math.sqrt(len(thoughts)))
+            heading = build_heading(self.agent, f"Thinking... {pipes}")
 
-        if "tool_name" in parsed:
-            heading += f" ({parsed['tool_name']})"
+        # if "tool_name" in parsed:
+        #     heading += f" ({parsed['tool_name']})"
 
         # create log message and store it in loop data temporary params
         if "log_item_generating" not in loop_data.params_temporary:
@@ -48,4 +49,4 @@ class LogFromStream(Extension):
         kvps.update(parsed)
 
         # update the log item
-        log_item.update(heading=heading, content=text, kvps=kvps)
+        log_item.update(heading=heading, content=text, kvps=kvps)

python/extensions/response_stream/_20_live_response.py

@@ -30,7 +30,7 @@ class LiveResponse(Extension):
                 loop_data.params_temporary["log_item_response"] = (
                     self.agent.context.log.log(
                         type="response",
-                        heading=f"{self.agent.agent_name}: Responding",
+                        heading=f"icon://chat {self.agent.agent_name}: Responding",
                     )
                 )
 

python/helpers/tool.py

@@ -42,9 +42,9 @@ class Tool:
 
     def get_log_object(self):
         if self.method:
-            heading = f"{self.agent.agent_name}: Using tool '{self.name}:{self.method}'"
+            heading = f"icon://construction {self.agent.agent_name}: Using tool '{self.name}:{self.method}'"
         else:
-            heading = f"{self.agent.agent_name}: Using tool '{self.name}'"
+            heading = f"icon://construction {self.agent.agent_name}: Using tool '{self.name}'"
         return self.agent.context.log.log(type="tool", heading=heading, content="", kvps=self.args)
 
     def nice_key(self, key:str):

python/tools/browser_agent.py

@@ -313,7 +313,7 @@ class BrowserAgent(Tool):
     def get_log_object(self):
         return self.agent.context.log.log(
             type="browser",
-            heading=f"{self.agent.agent_name}: Using tool '{self.name}'",
+            heading=f"icon://captive_portal {self.agent.agent_name}: Calling Browser Agent",
             content="",
             kvps=self.args,
         )

python/tools/call_subordinate.py

@@ -31,4 +31,12 @@ class Delegation(Tool):
         result = await subordinate.monologue()
 
         # result
-        return Response(message=result, break_loop=False)
+        return Response(message=result, break_loop=False)
+
+    def get_log_object(self):
+        return self.agent.context.log.log(
+            type="tool",
+            heading=f"icon://communication {self.agent.agent_name}: Calling Subordinate Agent",
+            content="",
+            kvps=self.args,
+        )

python/tools/input.py

@@ -20,7 +20,7 @@ class Input(Tool):
         return await cet.execute(**args)
 
     def get_log_object(self):
-        return self.agent.context.log.log(type="code_exe", heading=f"{self.agent.agent_name}: Using tool '{self.name}'", content="", kvps=self.args)
+        return self.agent.context.log.log(type="code_exe", heading=f"icon://keyboard {self.agent.agent_name}: Using tool '{self.name}'", content="", kvps=self.args)
 
     async def after_execution(self, response, **kwargs):
         self.agent.hist_add_tool_result(self.name, response.message)

python/tools/task_done.py

@@ -1,13 +0,0 @@
-from python.helpers.tool import Tool, Response
-
-class TaskDone(Tool):
-
-    async def execute(self,**kwargs):
-        self.agent.set_data("timeout", 0)
-        return Response(message=self.args["text"], break_loop=True)
-
-    async def before_execution(self, **kwargs):
-        self.log = self.agent.context.log.log(type="response", heading=f"{self.agent.agent_name}: Task done", content=self.args.get("text", ""))
-    
-    async def after_execution(self, response, **kwargs):
-        pass # do add anything to the history or output

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

@@ -14,11 +14,11 @@ const model = {
   _getDefaultSettings() {
     return {
       "message-agent": { minimized: true, maximized: false },
-      "messsage-code-exec": { minimized: false, maximized: false },
+      "message-agent-response": { minimized: false, maximized: true },
     };
   },
 
-  _getSetting(className) {
+  getSetting(className) {
     return this.settings[className] || { minimized: false, maximized: false };
   },
 
@@ -41,7 +41,7 @@ const model = {
   },
 
   async minimizeMessageClass(className, event) {
-    const set = this._getSetting(className);
+    const set = this.getSetting(className);
     set.minimized = !set.minimized;
     this._setSetting(className, set);
     this._applySetting(className, set);
@@ -49,7 +49,7 @@ const model = {
   },
 
   async maximizeMessageClass(className, event) {
-    const set = this._getSetting(className);
+    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);
@@ -58,7 +58,58 @@ const model = {
   },
 
   _applyScroll(event) {
-    event.target.scrollIntoView({ behavior: "smooth" });
+    if (!event || !event.target) {
+      return;
+    }
+    
+    // Store the element reference to avoid issues with event being modified
+    const targetElement = event.target;
+    const clickY = event.clientY;
+    
+    // Use requestAnimationFrame for smoother timing with browser rendering
+    // requestAnimationFrame(() => {
+        try {
+          // Get fresh measurements after potential re-renders
+          const rect = targetElement.getBoundingClientRect();
+          const viewHeight = window.innerHeight || document.documentElement.clientHeight;
+          
+          // Get chat history element
+          const chatHistory = document.getElementById('chat-history');
+          if (!chatHistory) {
+            return;
+          }
+          
+          // Get chat history position
+          const chatRect = chatHistory.getBoundingClientRect();
+          
+          // Calculate element's middle position relative to chat history
+          const elementHeight = rect.height;
+          const elementMiddle = rect.top + (elementHeight / 2);
+          const relativeMiddle = elementMiddle - chatRect.top;
+          
+          // Calculate target scroll position
+          let scrollTop;
+          
+          if (typeof clickY === 'number') {
+            // Calculate based on click position
+            const clickRelativeToChat = clickY - chatRect.top;
+            // Add current scroll position and adjust to keep element middle at click position
+            scrollTop = chatHistory.scrollTop + relativeMiddle - clickRelativeToChat;
+          } else {
+            // Position element middle at 50% from the top of chat history viewport (center)
+            const targetPosition = chatHistory.clientHeight * 0.5;
+            scrollTop = chatHistory.scrollTop + relativeMiddle - targetPosition;
+          }
+          
+          // Apply scroll with instant behavior
+          chatHistory.scrollTo({
+            top: scrollTop,
+            behavior: "auto"
+          });
+        } catch (e) {
+          // Silent error handling
+        }
+    // });
   },
 
   _applySetting(className, setting) {

webui/css/messages.css

@@ -1,656 +1,677 @@
 /* Chat History */
 #chat-history {
-    display: -webkit-flex;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    width: 100%;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    scroll-behavior: auto !important; /* avoid infinite scrolling! */
-    padding: var(--spacing-md) var(--spacing-sm) 0;
-    -webkit-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-    scrollbar-width: thin;
-    scrollbar-color: #555 transparent;
-  }
-  
-  #chat-history > *:first-child {
-    margin-top: 4.4em;
-  }
-  
-  /* Scrollbar styling for Firefox */
-  #chat-history::-webkit-scrollbar {
-    width: 5px;
-  }
-  
-  #chat-history::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
-    border-radius: 3px;
-  }
-  
-  #chat-history::-webkit-scrollbar-thumb {
-    border-radius: 3px;
-    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
-    background-color: #555;
-    -webkit-transition: background-color var(--transition-speed) ease-in-out;
-    transition: background-color var(--transition-speed) ease-in-out;
-  }
-  
-  #chat-history::-webkit-scrollbar-thumb:hover {
-    background-color: #666;
-  }
-  
-  #chat-history::-webkit-scrollbar-thumb:active {
-    background-color: #888;
-  }
-  
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  width: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  scroll-behavior: auto !important; /* avoid infinite scrolling! */
+  padding: var(--spacing-md) var(--spacing-sm) 0;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  scrollbar-width: thin;
+  scrollbar-color: #555 transparent;
+}
+
+#chat-history > *:first-child {
+  margin-top: 4.4em;
+}
+
+/* Scrollbar styling for Firefox */
+#chat-history::-webkit-scrollbar {
+  width: 5px;
+}
+
+#chat-history::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
+  border-radius: 3px;
+}
+
+#chat-history::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
+  background-color: #555;
+  -webkit-transition: background-color var(--transition-speed) ease-in-out;
+  transition: background-color var(--transition-speed) ease-in-out;
+}
+
+#chat-history::-webkit-scrollbar-thumb:hover {
+  background-color: #666;
+}
+
+#chat-history::-webkit-scrollbar-thumb:active {
+  background-color: #888;
+}
 
 /* Message Styles */
 
-  
-  .user-container {
-    align-self: flex-end;
-    /* margin: var(--spacing-sm) var(--spacing-md); */
-    /* margin-bottom: var(--spacing-lg); */
-    /* margin-top: var(--spacing-sm); */
-    display: flex;
-    justify-content: flex-end;
-    width: 100%;
-  }
-  
-  .ai-container {
-    align-self: flex-start;
-  }
-  
-  .center-container {
-    align-self: center;
-    max-width: 80%;
-    margin: 0;
-  }
-  
-  .center-container .message {
-    margin-bottom: var(--spacing-sm);
-  }
-  
-  .message-user {
-    background-color: #4a4a4a;
-    /* border-bottom-right-radius: var(--spacing-xxs); */
-    min-width: 195px;
-    text-align: end;
-  }
-  
-  .message-user > div {
-    padding-top: var(--spacing-xs);
-    font-family: "Roboto Mono", monospace;
-    font-optical-sizing: auto;
-    -webkit-font-optical-sizing: auto;
-    font-size: var(--font-size-small);
-  }
-  
-  .message-ai {
-    /* border-bottom-left-radius: var(--spacing-xxs); */
-  }
-  
-  .message-center {
-    align-self: center;
-    /* border-bottom-left-radius: unset; */
-  }
-  
-  .message-followup {
-    /* margin-left: var(--spacing-lg); */
-    /* margin-bottom: var(--spacing-lg); */
-  }
-  
-  .message-followup .message {
-    border-radius: 1.125em; /* 18px */
-    /* border-top-left-radius: var(--spacing-xxs); */
-  }
-  
-  .message-followup + .message-followup {
-    margin-bottom: 0;
-  }
-  
-  /* Update message types for dark mode */
-  .message-default,
-  .message-agent,
-  .message-agent-response,
-  .message-agent-delegation,
-  .message-tool,
-  .message-code-exe,
-  .message-browser,
-  .message-info,
-  .message-util,
-  .message-warning,
-  .message-error {
-    color: #e0e0e0;
-  }
-  
-  .message-default {
-    background-color: #1a242f;
-  }
-  
-  .message-agent {
-    background-color: #34506b;
-  }
-  
-  .message-agent-response {
-    min-width: 255px;
-    background-color: #1f3c1e;
-  }
-  
-  .message-agent-delegation {
-    background-color: #12685e;
-  }
-  
-  .message-tool {
-    background-color: #2a4170;
-  }
-  
-  .message-code-exe {
-    background-color: #4b3a69;
-  }
-  
-  .message-code-exe .message-body {
-    min-height: 5em;
-    width: 100%;
-    background-color: var(--color-panel);
-    border-radius: 0.5em;
-    margin-top: 0.5em;
-    padding: 0.3em;
-  }
-  
-  .light-mode .message-code-exe .message-body {
-    border: 1px solid var(--color-border);
-  }
-  
-  .message-browser {
-    background-color: #4b3a69;
-  }
-  
-  .message-info {
-    background-color: var(--color-panel);
-  }
-  
-  .message-util {
-    background-color: #23211a;
-    display: none;
-  }
-  
-  .message-warning {
-    background-color: #bc8036;
-  }
-  
-  .message-error {
-    background-color: #af2222;
-  }
-  
-  /* Agent and AI Info */
-  .agent-start {
-    color: var(--color-text);
-    font-size: var(--font-size-small);
-    margin-bottom: var(--spacing-xs);
-    opacity: 0.7;
-  }
-  
-  .msg-kvps {
-    font-size: 0.9em;
-    margin: 0.5rem 0 0.55rem 0;
-    border-collapse: collapse;
-    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;
-    padding: 0.25rem;
-    padding-left: 0;
-    text-align: left;
-  }
-  
-  .msg-kvps th {
-    color: var(--color-primary);
-    width: 40%;
-  }
-  
-  .msg-kvps tr {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
-  }
-  
-  .msg-heading {
-    margin: 0;
-    position: relative;
-    display: block;
-    white-space: nowrap;
-  }
-  
-  .msg-heading h4 {
-    margin: 0;
-    /* width: calc(100% - 4em); */
-    margin-right: 4em;
-    overflow-y: hidden;
-    text-overflow: ellipsis;
-  }
-  
-  /* Message Actions */
-  .message-actions {
-    color: var(--color-text);
-    font-size: var(--font-size-small);
-    margin-top: var(--spacing-xs);
-  }
-  
-  .message-action {
-    cursor: pointer;
-    opacity: 0.7;
-    -webkit-transition: opacity var(--transition-speed) ease-in-out;
-    transition: opacity var(--transition-speed) ease-in-out;
-  }
-  
-  .message-action:hover {
-    opacity: 1;
-  }
+.user-container {
+  align-self: flex-end;
+  /* margin: var(--spacing-sm) var(--spacing-md); */
+  /* margin-bottom: var(--spacing-lg); */
+  /* margin-top: var(--spacing-sm); */
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.ai-container {
+  align-self: flex-start;
+}
+
+.center-container {
+  align-self: center;
+  max-width: 80%;
+  margin: 0;
+}
+
+.center-container .message {
+  /* margin-bottom: var(--spacing-sm); */
+}
+
+.message-user {
+  background-color: #4a4a4a;
+  /* border-bottom-right-radius: var(--spacing-xxs); */
+  min-width: 195px;
+  text-align: end;
+}
+
+.message-user > div {
+  padding-top: var(--spacing-xs);
+  font-family: "Roboto Mono", monospace;
+  font-optical-sizing: auto;
+  -webkit-font-optical-sizing: auto;
+  font-size: var(--font-size-small);
+}
+
+.message-ai {
+  /* border-bottom-left-radius: var(--spacing-xxs); */
+}
+
+.message-center {
+  align-self: center;
+  /* border-bottom-left-radius: unset; */
+}
+
+.message-followup {
+  /* margin-left: var(--spacing-lg); */
+  /* margin-bottom: var(--spacing-lg); */
+}
+
+.message-followup .message {
+  border-radius: 1.125em; /* 18px */
+  /* border-top-left-radius: var(--spacing-xxs); */
+}
+
+.message-followup + .message-followup {
+  margin-bottom: 0;
+}
+
+/* Update message types for dark mode */
+.message-default,
+.message-agent,
+.message-agent-response,
+.message-agent-delegation,
+.message-tool,
+.message-code-exe,
+.message-browser,
+.message-info,
+.message-util,
+.message-warning,
+.message-error {
+  color: #e0e0e0;
+}
+
+.message-default {
+  background-color: #1a242f;
+}
+
+.message-agent {
+  background-color: #34506b;
+}
+
+.message-agent-response {
+  min-width: 255px;
+  background-color: #1f3c1e;
+}
+
+.message-agent-delegation {
+  background-color: #12685e;
+}
+
+.message-tool {
+  background-color: #2a4170;
+}
+
+.message-code-exe {
+  background-color: #4b3a69;
+}
+
+.message-code-exe .message-body {
+  min-height: 5em;
+  width: 100%;
+  background-color: var(--color-panel);
+  border-radius: 0.5em;
+  margin-top: 0.5em;
+  padding: 0.3em;
+}
+
+.message-body .message-markdown-table-wrap {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  margin-bottom: 1em;
+}
+
+.message-body .message-markdown-table-wrap table {
+  width: auto;
+  table-layout: auto;
+  white-space: nowrap;
+}
+
+.light-mode .message-code-exe .message-body {
+  border: 1px solid var(--color-border);
+}
+
+.message-browser {
+  background-color: #4b3a69;
+}
+
+.message-info {
+  background-color: var(--color-panel);
+}
+
+.message-util {
+  background-color: #23211a;
+  display: none;
+}
+
+.message-warning {
+  background-color: #bc8036;
+}
+
+.message-error {
+  background-color: #af2222;
+}
+
+/* Agent and AI Info */
+.agent-start {
+  color: var(--color-text);
+  font-size: var(--font-size-small);
+  margin-bottom: var(--spacing-xs);
+  opacity: 0.7;
+}
+
+.msg-kvps {
+  font-size: 0.9em;
+  margin: 0.5rem 0 0.55rem 0;
+  border-collapse: collapse;
+  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;
+  padding: 0.25rem;
+  padding-left: 0;
+  text-align: left;
+}
+
+.msg-kvps th {
+  color: var(--color-primary);
+  width: 40%;
+}
+
+.msg-kvps tr {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.msg-heading {
+  margin: 0;
+  position: relative;
+  display: block;
+  white-space: nowrap;
+}
+
+.msg-heading h4 {
+  margin: 0;
+  /* width: calc(100% - 4em); */
+  margin-right: 4em;
+  overflow-y: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Message Actions */
+.message-actions {
+  color: var(--color-text);
+  font-size: var(--font-size-small);
+  margin-top: var(--spacing-xs);
+}
+
+.message-action {
+  cursor: pointer;
+  opacity: 0.7;
+  -webkit-transition: opacity var(--transition-speed) ease-in-out;
+  transition: opacity var(--transition-speed) ease-in-out;
+}
+
+.message-action:hover {
+  opacity: 1;
+}
 
 /* Copy button styles */
 .copy-button {
-    position: absolute;
-    right: 0;
-    top: var(--spacing-sm);
-    background: none;
-    border: none;
-    padding: var(--spacing-xs) var(--spacing-sm);
-    padding-right: 0;
-    cursor: pointer;
-    text-decoration: underline;
-    text-wrap: nowrap;
-    opacity: 0;
-    -webkit-transition: opacity var(--transition-speed) ease-in-out;
-    transition: opacity var(--transition-speed) ease-in-out;
-    color: inherit;
-    font-size: 12px;
-    font-family: "Rubik", Arial, Helvetica, sans-serif;
-  }
-  
-  .copy-button:hover {
-    opacity: 0.8 !important;
-  }
-  
-  .msg-content:hover .copy-button,
-  .kvps-row:hover .copy-button,
-  .message-text:hover .copy-button {
-    opacity: 0.6;
-  }
-  
-  .copy-button.copied {
-    font-family: "Rubik", Arial, Helvetica, sans-serif !important;
-    opacity: 1 !important;
-  }
-  
-  .msg-thoughts .copy-button {
-    top: -12px !important;
-  }
-  
-  .message-user .copy-button {
-    top: -15px !important;
-    left: -13px !important;
-    right: 99% !important;
-  }
-  
-  .message-agent-response .copy-button {
-    top: -22px !important;
-    right: 0 !important;
-    padding-right: 0px !important;
-  }
-  
-  .message-info .copy-button {
-    top: -22px !important;
-    right: 0 !important;
-    padding-right: 0px !important;
-  }
-  
-  .message-tool .copy-button {
-    top: -12px !important;
-    right: 0 !important;
-  }
-  
-  .msg-output .copy-button {
-    top: -6px !important;
-    right: 0 !important;
-  }
-  
-  /* Make message containers relative for absolute positioning of copy buttons */
-  .msg-content,
-  .kvps-row,
-  .message-text {
-    position: relative;
-  }
-  
-  .message-text pre {
-    margin: 0;
-  }
+  position: absolute;
+  right: 0;
+  top: var(--spacing-sm);
+  background: none;
+  border: none;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  padding-right: 0;
+  cursor: pointer;
+  text-decoration: underline;
+  text-wrap: nowrap;
+  opacity: 0;
+  -webkit-transition: opacity var(--transition-speed) ease-in-out;
+  transition: opacity var(--transition-speed) ease-in-out;
+  color: inherit;
+  font-size: 12px;
+  font-family: "Rubik", Arial, Helvetica, sans-serif;
+}
+
+.copy-button:hover {
+  opacity: 0.8 !important;
+}
+
+.msg-content:hover .copy-button,
+.kvps-row:hover .copy-button,
+.message-text:hover .copy-button {
+  opacity: 0.6;
+}
+
+.copy-button.copied {
+  font-family: "Rubik", Arial, Helvetica, sans-serif !important;
+  opacity: 1 !important;
+}
+
+.msg-thoughts .copy-button {
+  top: -12px !important;
+}
+
+.message-user .copy-button {
+  top: -15px !important;
+  left: -13px !important;
+  right: 99% !important;
+}
+
+.message-agent-response .copy-button {
+  top: -22px !important;
+  right: 0 !important;
+  padding-right: 0px !important;
+}
+
+.message-info .copy-button {
+  top: -22px !important;
+  right: 0 !important;
+  padding-right: 0px !important;
+}
+
+.message-tool .copy-button {
+  top: -12px !important;
+  right: 0 !important;
+}
+
+.msg-output .copy-button {
+  top: -6px !important;
+  right: 0 !important;
+}
+
+/* Make message containers relative for absolute positioning of copy buttons */
+.msg-content,
+.kvps-row,
+.message-text {
+  position: relative;
+}
+
+.message-text pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
 
 /* Utility Classes */
 .kvps-key {
-    font-weight: 500;
-    font-size: var(--font-size-small);
-  }
-  
-  .kvps-val {
-    margin: 0.65rem 0 0.65rem 0.4rem;
-    white-space: pre-wrap;
-  }
-  
-  .kvps-img {
-    width: 8em;
-    height: 8em;
-    object-fit: cover;
-    object-position: top left;
-    border-radius: 10%;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-  }
-  
-  .image-viewer-img {
-    width: 100%;
-  }
-  
-  .msg-json {
-    display: none;
-  }
-  
-  .msg-thoughts {
-    display: auto;
-  }
-  
-  .msg-thoughts .kvps-val {
-    max-height: 20em;
-    overflow: auto;
-  }
-  
-  .msg-content {
-    margin-bottom: 0;
-  }
-  
-  .message-temp {
-    display: none;
-  }
-  
-  .message-temp:not([style*="display: none"]):last-of-type {
-    display: block; /* or any style you want for visibility */
-  }
+  font-weight: 500;
+  font-size: var(--font-size-small);
+  min-width: 7em;
+}
+
+.kvps-val {
+  margin: 0.65rem 0 0.65rem 0.4rem;
+  white-space: pre-wrap;
+}
+
+.kvps-img {
+  width: 8em;
+  height: 8em;
+  object-fit: cover;
+  object-position: top left;
+  border-radius: 10%;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.image-viewer-img {
+  width: 100%;
+}
+
+.msg-json {
+  display: none;
+}
+
+.msg-thoughts {
+  display: auto;
+}
+
+.msg-thoughts .kvps-val {
+  max-height: 20em;
+  overflow: auto;
+}
+
+.msg-content {
+  margin-bottom: 0;
+}
+
+.message-temp {
+  display: none;
+}
+
+.message-temp:not([style*="display: none"]):last-of-type {
+  display: block; /* or any style you want for visibility */
+}
 
 /* Math (KaTeX) */
 .katex {
-    line-height: 1.2 !important;
-    font-size: 1.1em;
-  }
+  line-height: 1.2 !important;
+  font-size: 1.1em;
+}
 
 /* Media Queries */
 @media (max-width: 640px) {
-       /* New styles for mobile messages */
-  
-    .message-followup {
-      /* margin-left: var(--spacing-md); */
-      margin-bottom: var(--spacing-md);
-    }
-  
-    .msg-kvps {
-      display: flex;
-      flex-direction: column;
-      border-collapse: separate;
-      border-spacing: 0 0.5rem;
-    }
-  
-    .msg-kvps tr {
-      display: flex;
-      flex-direction: column;
-      margin-top: 0.3rem;
-      padding-bottom: 0;
-    }
-  
-    .msg-kvps th,
-    .msg-kvps td {
-      display: block;
-      width: 100%;
-      text-align: left;
-      border-bottom: none;
-      padding: 0.25rem 0;
-      padding-left: 0 !important;
-    }
-  
-    .msg-kvps th {
-      color: var(--color-primary);
-      margin-bottom: 0.25rem;
-    }
-  
-    .kvps-val {
-      margin: 0 0 0.4rem 0;
-      white-space: pre-wrap;
-      word-break: break-word;
-      overflow-wrap: anywhere;
-    }
-  }
+  /* New styles for mobile messages */
 
-.light-mode .msg-kvps tr {
-    border-bottom: 1px solid rgb(192 192 192 / 50%);
-  }
-  
-  .light-mode .message-default {
-    background-color: #f3f3f3;
-    color: #1a242f;
-  }
-  
-  .light-mode .message-agent {
-    background-color: #f3f3f3;
-    color: #356ca3;
-  }
-  
-  .light-mode .message-agent-response {
-    background-color: #f3f3f3;
-    color: #188216;
-  }
-  
-  .light-mode .message-agent-delegation {
-    background-color: #f3f3f3;
-    color: #12685e;
-  }
-  
-  .light-mode .message-tool {
-    background-color: #f3f3f3;
-    color: #1c3c88;
-  }
-  
-  .light-mode .message-code-exe {
-    background-color: #f3f3f3;
-    color: #6c43b0;
-  }
-  
-  .light-mode .message-browser {
-    background-color: #ffffff;
-    color: #6c43b0;
-  }
-  
-  .light-mode .message-info {
-    background-color: #f3f3f3;
-    color: #3f3f3f;
-  }
-  
-  .light-mode .message-util {
-    background-color: #f3f3f3;
-    color: #5b5540;
-  }
-  
-  .light-mode .message-warning {
-    background-color: #f3f3f3;
-    color: #8f4800;
-  }
-  
-  .light-mode .message-error {
-    background-color: #f3f3f3;
-    color: #8f1010;
-  }
-  
-  .light-mode .message-user {
-    background-color: #f3f3f3;
-    color: #4e4e4e;
+  .message-followup {
+    /* margin-left: var(--spacing-md); */
+    margin-bottom: var(--spacing-md);
   }
 
-/* Markdown in messages */
-.msg-content {
-    font-size: var(--font-size-small);
-  }
-  
-  .message-agent-response .msg-content {
-    font-size: var(--font-size-smaller);
-  }
-  
-  .msg-content h1 {
-    font-size: 1.25em;
-    font-weight: 800;
-    margin-bottom: 0.2em;
-  }
-  
-  .msg-content h2 {
-    font-size: 1.2em;
-    font-weight: 700;
-    margin-bottom: 0.2em;
-  }
-  
-  .msg-content h3 {
-    font-size: 1.15em;
-    font-weight: 600;
-    margin-bottom: 0.2em;
-  }
-  
-  .msg-content h4 {
-    font-size: 1.1em;
-    font-weight: 500;
-    margin-bottom: 0.2em;
-  }
-  
-  .msg-content h5 {
-    font-size: 1.05em;
-    font-weight: 500;
-    margin-bottom: 0.2em;
+  .msg-kvps {
+    display: flex;
+    flex-direction: column;
+    border-collapse: separate;
+    border-spacing: 0 0.5rem;
   }
-  
-  .msg-content h6 {
-    font-size: 1em;
-    font-weight: 500;
-    margin-bottom: 0.2em;
+
+  .msg-kvps tr {
+    display: flex;
+    flex-direction: column;
+    margin-top: 0.3rem;
+    padding-bottom: 0;
   }
-  
-  .msg-content table {
+
+  .msg-kvps th,
+  .msg-kvps td {
+    display: block;
     width: 100%;
-    border-collapse: collapse;
-    margin: 1em 0;
-    font-size: 0.98em;
-    background: transparent;
-    border-radius: 8px;
-    overflow: hidden;
-  }
-  
-  .msg-content th,
-  .msg-content td {
-    padding: 0.55em 1em;
-    border: 1px solid rgba(142, 142, 142, 0.1);
     text-align: left;
-    background: transparent;
-  }
-  
-  .msg-content th {
-    font-weight: 600;
-    background: rgba(142, 142, 142, 0.1);
-  }
-  
-  .msg-content tr:nth-child(even) {
-    background: rgba(142, 142, 142, 0.1);
-  }
-  
-  .msg-content tr:nth-child(odd) {
-    background: transparent;
-  }
-  
-  .msg-content table {
-    box-shadow: none;
-  }
-  
-  .msg-content pre:has(code) {
-    padding: 0.5em;
-    border: 1px solid rgba(142, 142, 142, 0.1);
-    border-radius: 0.3em;
-  }
-  
-  .msg-min-max-btns {
-    opacity: 40%;
-    position: absolute;
-    top: -0.2em;
-    right: -0.2em;
-    display: flex;
-    gap: 0.3em;
-    z-index: 1;
+    border-bottom: none;
+    padding: 0.25rem 0;
+    padding-left: 0 !important;
   }
 
-.message-group {
-    margin-top: 1em;
-    margin-bottom: 1em;
-    display: inline-grid;
-    grid-template-columns: minmax(0, max-content);
-    grid-auto-rows: auto;
-    max-width: 100%;
-    width: fit-content;
-  }
-  
-  .message-group > * {
-    grid-column: 1;
-  } /* both children sit in the same column */
-  
-  .message-group-right {
-    justify-content: end;
-  }
-  
-  .message-group-mid {
-    justify-content: center;
-  }
-  
-  /* 1. FIRST child’s .message – clear ONLY bottom corners          */
-  .message-group > *:first-child:not(:last-child) > .message {
-    border-bottom-left-radius: var(--spacing-xxs);;
-    border-bottom-right-radius: var(--spacing-xxs);;
-  }
-  
-  /* 2. MIDDLE children’s .message – clear ALL corners              */
-  .message-group > *:not(:first-child):not(:last-child) > .message {
-    border-radius: var(--spacing-xxs);
-  }
-  
-  /* 3. LAST child’s .message – clear ONLY top corners              */
-  .message-group > *:last-child:not(:first-child) > .message {
-    border-top-left-radius: var(--spacing-xxs);;
-    border-top-right-radius: var(--spacing-xxs);;
+  .msg-kvps th {
+    color: var(--color-primary);
+    margin-bottom: 0.25rem;
   }
 
-  .message-container {
-    animation: fadeIn 0.5s;
-    -webkit-animation: fadeIn 0.5s;
-    margin-bottom: var(--spacing-sm);
-    width: 100%;
-    max-width: 100%;
-  }
-  
-  .message {
-    /* background-color: var(--color-message-bg); */
-    border-radius: var(--border-radius);
-    padding: 0.9rem var(--spacing-sm) 0.7rem var(--spacing-sm);
-    overflow-x: auto;
-    width: auto;
-    max-width: 100%;
-    box-sizing: border-box;
-    display: block;
+  .kvps-val {
+    margin: 0 0 0.4rem 0;
+    white-space: pre-wrap;
     word-break: break-word;
     overflow-wrap: anywhere;
-  }
+  }
+}
+
+.light-mode .msg-kvps tr {
+  border-bottom: 1px solid rgb(192 192 192 / 50%);
+}
+
+.light-mode .message-default {
+  background-color: #f3f3f3;
+  color: #1a242f;
+}
+
+.light-mode .message-agent {
+  background-color: #f3f3f3;
+  color: #356ca3;
+}
+
+.light-mode .message-agent-response {
+  background-color: #f3f3f3;
+  color: #188216;
+}
+
+.light-mode .message-agent-delegation {
+  background-color: #f3f3f3;
+  color: #12685e;
+}
+
+.light-mode .message-tool {
+  background-color: #f3f3f3;
+  color: #1c3c88;
+}
+
+.light-mode .message-code-exe {
+  background-color: #f3f3f3;
+  color: #6c43b0;
+}
+
+.light-mode .message-browser {
+  background-color: #ffffff;
+  color: #6c43b0;
+}
+
+.light-mode .message-info {
+  background-color: #f3f3f3;
+  color: #3f3f3f;
+}
+
+.light-mode .message-util {
+  background-color: #f3f3f3;
+  color: #5b5540;
+}
+
+.light-mode .message-warning {
+  background-color: #f3f3f3;
+  color: #8f4800;
+}
+
+.light-mode .message-error {
+  background-color: #f3f3f3;
+  color: #8f1010;
+}
+
+.light-mode .message-user {
+  background-color: #f3f3f3;
+  color: #4e4e4e;
+}
+
+.message-body{
+  padding-top:0.5em;
+  padding-bottom:0.5em;
+}
+
+/* Markdown in messages */
+.msg-content {
+  font-size: var(--font-size-small);
+}
+
+.message-agent-response .msg-content {
+  font-size: var(--font-size-smaller);
+}
+
+.msg-content h1 {
+  font-size: 1.25em;
+  font-weight: 800;
+  margin-bottom: 0.2em;
+}
+
+.msg-content h2 {
+  font-size: 1.2em;
+  font-weight: 700;
+  margin-bottom: 0.2em;
+}
+
+.msg-content h3 {
+  font-size: 1.15em;
+  font-weight: 600;
+  margin-bottom: 0.2em;
+}
+
+.msg-content h4 {
+  font-size: 1.1em;
+  font-weight: 500;
+  margin-bottom: 0.2em;
+}
+
+.msg-content h5 {
+  font-size: 1.05em;
+  font-weight: 500;
+  margin-bottom: 0.2em;
+}
+
+.msg-content h6 {
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0.2em;
+}
+
+.msg-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+  font-size: 0.98em;
+  background: transparent;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.msg-content th,
+.msg-content td {
+  padding: 0.55em 1em;
+  border: 1px solid rgba(142, 142, 142, 0.1);
+  text-align: left;
+  background: transparent;
+}
+
+.msg-content th {
+  font-weight: 600;
+  background: rgba(142, 142, 142, 0.1);
+}
+
+.msg-content tr:nth-child(even) {
+  background: rgba(142, 142, 142, 0.1);
+}
+
+.msg-content tr:nth-child(odd) {
+  background: transparent;
+}
+
+.msg-content table {
+  box-shadow: none;
+}
+
+.msg-content pre:has(code) {
+  padding: 0.5em;
+  border: 1px solid rgba(142, 142, 142, 0.1);
+  border-radius: 0.3em;
+}
+
+.msg-min-max-btns {
+  opacity: 40%;
+  position: absolute;
+  top: -0.2em;
+  right: -0.2em;
+  display: flex;
+  gap: 0.3em;
+  z-index: 1;
+}
+
+.message-group {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  display: inline-grid;
+  grid-template-columns: minmax(0, max-content);
+  grid-auto-rows: auto;
+  max-width: 100%;
+  width: fit-content;
+  gap: var(--spacing-xs);
+}
+
+.message-group > * {
+  grid-column: 1;
+} /* both children sit in the same column */
+
+.message-group-right {
+  width:100%;
+  justify-content: end;
+}
+
+.message-group-mid {
+  margin-left: 2em;
+}
+
+/* 1. FIRST child’s .message – clear ONLY bottom corners          */
+.message-group > *:first-child:not(:last-child) > .message {
+  border-bottom-left-radius: var(--spacing-xxs);
+  border-bottom-right-radius: var(--spacing-xxs);
+}
+
+/* 2. MIDDLE children’s .message – clear ALL corners              */
+.message-group > *:not(:first-child):not(:last-child) > .message {
+  border-radius: var(--spacing-xxs);
+}
+
+/* 3. LAST child’s .message – clear ONLY top corners              */
+.message-group > *:last-child:not(:first-child) > .message {
+  border-top-left-radius: var(--spacing-xxs);
+  border-top-right-radius: var(--spacing-xxs);
+}
+
+.message-container {
+  animation: fadeIn 0.5s;
+  -webkit-animation: fadeIn 0.5s;
+  /* margin-bottom: var(--spacing-sm); */
+  width: 100%;
+  max-width: 100%;
+}
+
+.message {
+  /* background-color: var(--color-message-bg); */
+  border-radius: var(--border-radius);
+  padding: 0.9rem var(--spacing-sm) 0.7rem var(--spacing-sm);
+  overflow-x: auto;
+  width: auto;
+  max-width: 100%;
+  box-sizing: border-box;
+  /* display: block; */
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}

webui/index.js

@@ -1,6 +1,7 @@
 import * as msgs from "./js/messages.js";
 import { speech } from "./js/speech.js";
 import * as api from "./js/api.js";
+import * as css from "./js/css.js";
 
 window.fetchApi = api.fetchApi; // TODO - backward compatibility for non-modular scripts, remove once refactored to alpine
 
@@ -513,6 +514,8 @@ function updateProgress(progress, active) {
     addClassToElement(progressBar, "shiny-text");
   }
 
+  progress = msgs.convertIcons(progress);
+
   if (progressBar.innerHTML != progress) {
     progressBar.innerHTML = progress;
   }
@@ -709,13 +712,11 @@ window.toggleAutoScroll = async function (_autoScroll) {
 };
 
 window.toggleJson = async function (showJson) {
-  // add display:none to .msg-json class definition
-  toggleCssProperty(".msg-json", "display", showJson ? "block" : "none");
+  css.toggleCssProperty(".msg-json", "display", showJson ? "block" : "none");
 };
 
 window.toggleThoughts = async function (showThoughts) {
-  // add display:none to .msg-json class definition
-  toggleCssProperty(
+  css.toggleCssProperty(
     ".msg-thoughts",
     "display",
     showThoughts ? undefined : "none"
@@ -723,10 +724,11 @@ window.toggleThoughts = async function (showThoughts) {
 };
 
 window.toggleUtils = async function (showUtils) {
-  // add display:none to .msg-json class definition
-  toggleCssProperty(".message-util", "display", showUtils ? undefined : "none");
-  // toggleCssProperty('.message-util .msg-kvps', 'display', showUtils ? undefined : 'none');
-  // toggleCssProperty('.message-util .msg-content', 'display', showUtils ? undefined : 'none');
+  css.toggleCssProperty(
+    ".message-util",
+    "display",
+    showUtils ? undefined : "none"
+  );
 };
 
 window.toggleDarkMode = function (isDark) {
@@ -799,30 +801,6 @@ document.addEventListener("DOMContentLoaded", () => {
   toggleDarkMode(isDarkMode);
 });
 
-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];
-    const rules = styleSheet.cssRules || styleSheet.rules;
-
-    for (let j = 0; j < rules.length; j++) {
-      const rule = rules[j];
-      if (rule.selectorText == selector) {
-        // Check if the property is already applied
-        if (value === undefined) {
-          rule.style.removeProperty(property);
-        } else {
-          rule.style.setProperty(property, value);
-        }
-        return;
-      }
-    }
-  }
-}
-
 window.loadChats = async function () {
   try {
     const fileContents = await readJsonFiles();

webui/js/messages.js

@@ -170,8 +170,8 @@ export function _drawMessage(
       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>
+        <a href="#" class="msg-min-max-btn" @click.prevent="$store.messageResize.minimizeMessageClass('${mainClass}', $event)"><span class="material-symbols-outlined" x-text="$store.messageResize.getSetting('${mainClass}').minimized ? 'expand_content' : 'minimize'"></span></a>
+        <a href="#" class="msg-min-max-btn" x-show="!$store.messageResize.getSetting('${mainClass}').minimized" @click.prevent="$store.messageResize.maximizeMessageClass('${mainClass}', $event)"><span class="material-symbols-outlined" x-text="$store.messageResize.getSetting('${mainClass}').maximized ? 'expand' : 'expand_all'"></span></a>
       `;
       headingElement.appendChild(minMaxBtn);
     }
@@ -208,6 +208,7 @@ export function _drawMessage(
 
       contentDiv.appendChild(spanElement);
       addCopyButtonToElement(contentDiv);
+      adjustMarkdownRender(contentDiv);
       bodyDiv.appendChild(contentDiv);
     } else {
       const preElement = document.createElement("pre");
@@ -360,7 +361,7 @@ export function drawMessageUser(
 
   const headingElement = document.createElement("h4");
   headingElement.classList.add("msg-heading");
-  headingElement.textContent = "User message";
+  headingElement.innerHTML = "User message <span class='icon material-symbols-outlined'>person</span>";
   messageDiv.appendChild(headingElement);
 
   if (content && content.trim().length > 0) {
@@ -766,7 +767,7 @@ function convertImgFilePaths(str) {
   return str.replace("img://", "/image_get?path=");
 }
 
-function convertIcons(str) {
+export function convertIcons(str) {
   return str.replace(
     /icon:\/\/([a-zA-Z0-9_]+)/g,
     '<span class="icon material-symbols-outlined">$1</span>'
@@ -820,6 +821,24 @@ function convertPathsToLinks(str) {
     .join("");
 }
 
+function adjustMarkdownRender(element) {
+  // find all tables in the element
+  const tables = element.querySelectorAll('table');
+  
+  // wrap each table with a div with class message-markdown-table-wrap
+  tables.forEach(table => {
+    // create wrapper div
+    const wrapper = document.createElement('div');
+    wrapper.className = 'message-markdown-table-wrap';
+    
+    // insert wrapper before table in the DOM
+    table.parentNode.insertBefore(wrapper, table);
+    
+    // move table into wrapper
+    wrapper.appendChild(table);
+  });
+}
+
 // function convertPathsToLinksInHtml(htmlString) {
 //   // 1. Parse the input safely
 //   const wrapper = document.createElement("div");