Merge pull request #181 from sourcery-ai/ben/sou-1459-feat-improve-the-look-of-error-messages-and-include-icon

feat: add styles and icons for an error message

Author: bm424

media/chat.css

@@ -74,16 +74,16 @@
 .sidebar__chat-assistant--code-block-container {
   background-color: var(--vscode-settings-textInputBackground);
   padding: var(--spacing-xs);
-  border-radius: var(--spacing-xs);
   flex-grow: 1;
   flex-shrink: 1;
   overflow: hidden;
+  border-radius: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
 }
 
 .sidebar__chat-assistant--chat-bubble-content-user {
   background-color: var(--vscode-settings-textInputBackground);
   padding: var(--spacing-xs);
-  border-radius: var(--spacing-xs);
+  border-radius: var(--spacing-sm) var(--spacing-sm) 0 var(--spacing-sm);
 }
 
 .sidebar__chat-assistant--chat-bubble-content-user
@@ -136,9 +136,10 @@
   margin: 0;
   width: 100%;
   background-color: var(--vscode-editor-background);
-  border: 1px solid var(--vscode-panel-border);
+  outline: 1px solid var(--vscode-panel-border);
   border-radius: var(--spacing-xs);
   position: relative;
+  overflow: hidden;
 }
 
 button.sidebar__chat-assistant--chat-bubble-text--code-copy-button {
@@ -222,17 +223,6 @@ button.sidebar__chat-assistant--chat-bubble-text--code-copy-button:hover {
   text-decoration: none;
 }
 
-/* Don't round the specific corner where the avatar is, to make it look more like a chat bubble */
-.sidebar__chat-assistant--chat-bubble-agent
-  .sidebar__chat-assistant--chat-bubble-content {
-  border-bottom-left-radius: 0;
-}
-
-.sidebar__chat-assistant--chat-bubble-user
-  .sidebar__chat-assistant--chat-bubble-content {
-  border-bottom-right-radius: 0;
-}
-
 /* Make avatar bigger for user, since we're using an emoji for now */
 .sidebar__chat-assistant--chat-bubble-user
   .sidebar__chat-assistant--agent-avatar-image {
@@ -248,16 +238,16 @@ button.sidebar__chat-assistant--chat-bubble-text--code-copy-button:hover {
 
 .sidebar__chat-assistant--chat-bubble-error
   .sidebar__chat-assistant--chat-bubble-text {
-  color: var(--vscode-inputValidation-errorForeground);
+  color: var(--vscode-foreground);
 }
 
 .sidebar__chat-assistant--chat-bubble-error
   .sidebar__chat-assistant--chat-avatar-container {
   background: var(--vscode-inputValidation-errorBackground);
 }
 
-.sidebar__chat-assistant--chat-bubble-error svg {
-  fill: var(--vscode-sideBar-foreground);
+.sidebar__chat-assistant--chat-bubble-error {
+  fill: var(--vscode-foreground);
 }
 
 .sidebar__chat-assistant--cursor {

src/webview/chat.js

@@ -9,6 +9,10 @@ const chatAvatar = `<div class="sidebar__chat-assistant--chat-avatar-container">
 <span class="sidebar__chat-assistant--agent-avatar-image">🧙🏻‍♂️</span>
 </div>`;
 
+const errorAvatar = `<div class="sidebar__chat-assistant--chat-avatar-container" >
+    <svg xmlns="http://www.w3.org/2000/svg" height="1.25rem" viewBox="0 0 64 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V320c0 17.7 14.3 32 32 32s32-14.3 32-32V64zM32 480a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"/></svg>
+</div>`;
+
 // This is a little larger than the (empirical) number of pixels the window might scroll by when
 // a new line is added. If the line is less than this, we should try to keep scrolling with the window.
 // See `stickyScrollToBottom` below.
@@ -198,7 +202,7 @@ const LINE_HEIGHT = 36;
     } else {
       const templateContents = `
             <!-- Using an absolute sourcery.ai URL for now, since I'm not sure how does VS Code extensions handle static assets. -->
-            ${assistantAvatar}
+            ${message.outcome === "error" ? errorAvatar : assistantAvatar}
             <div class="sidebar__chat-assistant--chat-bubble-content-assistant">
               <p class="sidebar__chat-assistant--chat-bubble-text"></p>
             </div>`;