Refactor message icons

internal/service/static/main.css

@@ -477,11 +477,12 @@ body {
 /* ==================== */
 
 .message {
-  display: flex;
   max-width: 100%;
   border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius);
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .message--assistant .message__icon {
@@ -496,10 +497,6 @@ body {
   border-color: var(--color-error);
 }
 
-.message--error .message__icon {
-  border-color: var(--color-error);
-}
-
 .message--user .message__icon {
   color: var(--color-green);
 }
@@ -539,7 +536,8 @@ body {
 
 .message__actions {
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: space-between;
   gap: 0.125rem;
   padding: 0.125rem 0.25rem;
   border-top: 1px dotted var(--color-border-light);
@@ -550,9 +548,13 @@ body {
   display: none;
 }
 
+.message__actions-buttons {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
 .message__body {
-  flex: 1;
-  min-width: 0;
   display: flex;
   flex-direction: column;
 }
@@ -600,20 +602,12 @@ body {
 }
 
 .message__icon {
-  display: flex;
+  width: var(--action-icon-size);
-  align-items: center;
+  height: var(--action-icon-size);
-  justify-content: center;
+  flex-shrink: 0;
-  padding: var(--s-2);
-  border-right: var(--border-width) solid var(--color-border);
-  background: var(--color-bg);
   color: var(--color-text-muted);
 }
 
-.message__icon svg {
-  width: var(--icon-size);
-  height: var(--icon-size);
-}
-
 /* ==================== */
 /* Animations           */
 /* ==================== */

internal/service/templates/static/templates.gohtml

@@ -1,29 +1,29 @@
 {{ define "templates" }}
   <template id="tpl-user-message">
     <div class="message message--user">
-      <div class="message__icon" aria-hidden="true">
-        <svg class="icon"><use href="/static/icons.svg#user"></use></svg>
-      </div>
       <div class="message__body">
         <div class="message__content"></div>
         <div class="message__actions">
-          <button
+          <svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#user"></use></svg>
-            type="button"
+          <div class="message__actions-buttons">
-            class="message__action-btn"
+            <button
-            data-action="inspect"
+              type="button"
-            aria-label="Show details"
+              class="message__action-btn"
-            aria-expanded="false"
+              data-action="inspect"
-          >
+              aria-label="Show details"
-            <svg class="icon"><use href="/static/icons.svg#inspect"></use></svg>
+              aria-expanded="false"
-          </button>
+            >
-          <button
+              <svg class="icon"><use href="/static/icons.svg#inspect"></use></svg>
-            type="button"
+            </button>
-            class="message__action-btn"
+            <button
-            data-action="copy"
+              type="button"
-            aria-label="Copy to clipboard"
+              class="message__action-btn"
-          >
+              data-action="copy"
-            <svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
+              aria-label="Copy to clipboard"
-          </button>
+            >
+              <svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
+            </button>
+          </div>
         </div>
         <div class="message__debug">
           <dl class="message__debug-list"></dl>
@@ -34,29 +34,29 @@
 
   <template id="tpl-assistant-message">
     <div class="message message--assistant">
-      <div class="message__icon" aria-hidden="true">
-        <svg class="icon"><use href="/static/icons.svg#assistant"></use></svg>
-      </div>
       <div class="message__body">
         <div class="message__content"></div>
         <div class="message__actions">
-          <button
+          <svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#assistant"></use></svg>
-            type="button"
+          <div class="message__actions-buttons">
-            class="message__action-btn"
+            <button
-            data-action="inspect"
+              type="button"
-            aria-label="Show details"
+              class="message__action-btn"
-            aria-expanded="false"
+              data-action="inspect"
-          >
+              aria-label="Show details"
-            <svg class="icon"><use href="/static/icons.svg#inspect"></use></svg>
+              aria-expanded="false"
-          </button>
+            >
-          <button
+              <svg class="icon"><use href="/static/icons.svg#inspect"></use></svg>
-            type="button"
+            </button>
-            class="message__action-btn"
+            <button
-            data-action="copy"
+              type="button"
-            aria-label="Copy to clipboard"
+              class="message__action-btn"
-          >
+              data-action="copy"
-            <svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
+              aria-label="Copy to clipboard"
-          </button>
+            >
+              <svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
+            </button>
+          </div>
         </div>
         <div class="message__debug">
           <dl class="message__debug-list"></dl>
@@ -67,11 +67,11 @@
 
   <template id="tpl-error-message">
     <div class="message message--error message--assistant">
-      <div class="message__icon" aria-hidden="true">
-        <svg class="icon"><use href="/static/icons.svg#assistant"></use></svg>
-      </div>
       <div class="message__body">
         <div class="message__content"></div>
+        <div class="message__actions">
+          <svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#assistant"></use></svg>
+        </div>
       </div>
     </div>
   </template>