292 feat show the response is coming from the agent

vscode/media/onboarding/onboarding.js

@@ -281,7 +281,6 @@ let data = [
         },
         "description": "Your primary agent for any usage or coding help.",
         "metadata": {
-            "avatar_id": "https://cdn.commanddash.dev/assets/85fe1b9f-35a6-5732-9657-e880909c26e9/agents/avatars/08-06-2024/39a1406d-525f-44f9-b712-9d2a37cdc87b.jpeg",
             "description": "Your primary agent for any usage or coding help.",
             "display_name": "Dash",
             "tags": [],
@@ -454,7 +453,7 @@ let data = [
             "system_prompt": `You are a testing agent inside user's IDE. You can help them generate any kind of tests for their code in any programming language. They can attach multiple code pieces using Attach Snippet to Dash in the menu bar after selecting the code and provide you instruction on how they would like the tests to be generated.
 
             Users can either chat with you or also activate specific commands /unit, /widget and /integration by typing / in the text field and then choosing one of them from the dropdown. Commands accepts predefined inputs and generates the test when submitted.`,
-          },
+        },
         "supported_commands": [
             {
                 "intent": "Generate unit test",
@@ -1661,18 +1660,43 @@ function displayMessages() {
     } else {
         questionnaireContainer.classList.add("hidden");
     }
+    const _agentData = data.find((_data) => _data.name === currentActiveAgent);
     _conversationHistory.forEach((_message) => {
         const message = _message[currentActiveAgent];
         const messageElement = document.createElement("div");
         const roleElement = document.createElement("p");
         const contentElement = document.createElement("p");
         const buttonContainer = document.createElement("p");
         const agent = document.createElement("span");
+
         if (message.role === "model") {
             modelCount++;
 
-            roleElement.innerHTML = `<div class="inline-flex flex-row items-center">${dashAI}<span class="font-bold text-md ml-1">CommandDash</span></div>`;
+            const agentImage = document.createElement("img");
+            agentImage.style.height = "27px";
+            agentImage.style.width = "27px";
+            agentImage.style.borderRadius = "7px";
+            agentImage.src = _agentData.metadata.avatar_id;
+            agentImage.style.objectFit = "container";
+            agentImage.onerror = function () {
+                agentImage.style.height = "27px";
+                agentImage.style.width = "32px";
+                agentImage.src = "https://raw.githubusercontent.com/CommandDash/commanddash/develop/assets/commanddash-logo.png";
+            };
+
+            const roleElementContainer = document.createElement("div");
+            roleElementContainer.classList.add("inline-flex", "flex-row", "items-center");
+            roleElementContainer.appendChild(agentImage);
+
+            const displayNameSpan = document.createElement("span");
+            displayNameSpan.classList.add("font-bold", "text-md", "ml-1");
+            displayNameSpan.textContent = _agentData.metadata.display_name;
+            roleElementContainer.appendChild(displayNameSpan);
+
+            roleElement.innerHTML = ''; // Clear any existing content
+            roleElement.appendChild(roleElementContainer);
             roleElement.classList.add("block", "w-full", "px-2.5", "py-1.5", "bg-[#497BEF]/[.2]");
+
             contentElement.classList.add("text-sm", "block", "px-2.5", "py-1.5", "pt-2", "break-words", "leading-relaxed", "bg-[#497BEF]/[.2]");
             contentElement.innerHTML = markdownToPlain(message.parts);