improve: enhance ChatBox UI with consistent styling and better accessibility

• Fixed dictation button styling to match send button dimensions and colors
• Created dedicated DictationButton.scss for better button styling
• Removed vertical movement animations from all buttons for a more stable UI
• Fixed empty space issue below the "Show Agent Thoughts/Actions" button
• Implemented consistent hover effects across all interactive elements
• Ensured font size scaling works for agent thoughts/actions content
• Used Dash blue colors (#487af0, #3b6cd7) for consistent branding
• Improved microphone button state visualization with pulse animation

1 files changed, 73 insertions, 0 deletions

diff --git a/src/client/views/DictationButton.scss b/src/client/views/DictationButton.scss
new file mode 100644
index 000000000..ac8740c0f
--- /dev/null
+++ b/src/client/views/DictationButton.scss
@@ -0,0 +1,73 @@
+.dictation-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    min-width: 48px;
+    border-radius: 50%;
+    border: none;
+    background-color: #487af0;
+    color: white;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(72, 122, 240, 0.3);
+    padding: 0;
+    margin-left: 5px;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3));
+        opacity: 0;
+        transition: opacity 0.25s ease;
+    }
+
+    &:hover {
+        background-color: #3b6cd7; /* Slightly darker blue */
+        box-shadow: 0 3px 10px rgba(72, 122, 240, 0.4);
+
+        &::before {
+            opacity: 1;
+        }
+
+        svg {
+            transform: scale(1.1);
+        }
+    }
+
+    &:active {
+        background-color: #3463cc; /* Even darker for active state */
+        box-shadow: 0 2px 6px rgba(72, 122, 240, 0.3);
+    }
+
+    &.recording {
+        background-color: #ef4444;
+        color: white;
+        animation: pulse 1.5s infinite;
+    }
+
+    svg {
+        width: 22px;
+        height: 22px;
+        transition: transform 0.2s ease;
+    }
+}
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
+    }
+}