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, 15 insertions, 10 deletions

diff --git a/src/client/views/DictationButton.tsx b/src/client/views/DictationButton.tsx
index 0ce586df4..fc3165f67 100644
--- a/src/client/views/DictationButton.tsx
+++ b/src/client/views/DictationButton.tsx
@@ -1,8 +1,7 @@
-import { IconButton, Type } from '@dash/components';
-import { action, makeObservable, observable } from 'mobx';
+import { makeObservable, observable, action } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { BiMicrophone } from 'react-icons/bi';
+import './DictationButton.scss';
 import { DictationManager } from '../util/DictationManager';
 import { SnappingManager } from '../util/SnappingManager';
 
@@ -10,9 +9,11 @@ export interface DictationButtonProps {
     setInput: (val: string) => void;
     inputRef?: HTMLInputElement | null | undefined;
 }
+
 @observer
 export class DictationButton extends React.Component<DictationButtonProps> {
     @observable private _isRecording = false;
+
     constructor(props: DictationButtonProps) {
         super(props);
         makeObservable(this);
@@ -25,11 +26,9 @@ export class DictationButton extends React.Component<DictationButtonProps> {
 
     render() {
         return (
-            <IconButton
-                type={Type.TERT}
-                color={this._isRecording ? '#2bcaff' : SnappingManager.userVariantColor}
-                tooltip="Record"
-                icon={<BiMicrophone size="16px" />}
+            <button
+                className={`dictation-button ${this._isRecording ? 'recording' : ''}`}
+                title="Record"
                 onClick={action(() => {
                     if (!this._isRecording) {
                         this._isRecording = true;
@@ -50,8 +49,14 @@ export class DictationButton extends React.Component<DictationButtonProps> {
                     } else {
                         this.stopDictation();
                     }
-                })}
-            />
+                })}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
+                    <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
+                    <line x1="12" y1="19" x2="12" y2="23"></line>
+                    <line x1="8" y1="23" x2="16" y2="23"></line>
+                </svg>
+            </button>
         );
     }
 }