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, 0 insertions, 30 deletions

diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ProgressBar.tsx b/src/client/views/nodes/chatbot/chatboxcomponents/ProgressBar.tsx
deleted file mode 100644
index 240862f8b..000000000
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ProgressBar.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * @file ProgressBar.tsx
- * @description This file defines the ProgressBar component, which displays a loading spinner
- * to indicate progress during ongoing tasks or processing. The animation consists of two
- * bouncing elements that create a pulsating effect, providing a visual cue for active progress.
- * The component is styled using the accompanying `ProgressBar.scss` for smooth animation.
- */
-
-import React from 'react';
-import './ProgressBar.scss';
-
-/**
- * ProgressBar is a functional React component that displays a loading spinner
- * to indicate progress or ongoing processing. It uses two bouncing elements
- * to create a smooth animation that represents an active state.
- *
- * The animation consists of two divs (`double-bounce1` and `double-bounce2`),
- * each of which will bounce in and out of view, creating a pulsating effect.
- */
-export const ProgressBar: React.FC = () => {
-    return (
-        <div className="spinner-container">
-            {/* Spinner div containing two bouncing elements */}
-            <div className="spinner">
-                <div className="double-bounce1"></div> {/* First bouncing element */}
-                <div className="double-bounce2"></div> {/* Second bouncing element */}
-            </div>
-        </div>
-    );
-};