chore: Optimize component styles and interactions (#23250) (#23543)

web/app/components/base/chat/chat/index.tsx

@@ -284,9 +284,9 @@ const Chat: FC<ChatProps> = ({
             {
               !noStopResponding && isResponding && (
                 <div className='mb-2 flex justify-center'>
-                  <Button onClick={onStopResponding}>
+                  <Button className='border-components-panel-border bg-components-panel-bg text-components-button-secondary-text' onClick={onStopResponding}>
-                    <StopCircle className='mr-[5px] h-3.5 w-3.5 text-gray-500' />
+                    <StopCircle className='mr-[5px] h-3.5 w-3.5' />
-                    <span className='text-xs font-normal text-gray-500'>{t('appDebug.operation.stopResponding')}</span>
+                    <span className='text-xs font-normal'>{t('appDebug.operation.stopResponding')}</span>
                   </Button>
                 </div>
               )

web/app/components/workflow/panel/debug-and-preview/index.tsx

@@ -90,7 +90,7 @@ const DebugAndPreview = () => {
       <div
         ref={containerRef}
         className={cn(
-          'relative flex h-full flex-col rounded-l-2xl border border-r-0 border-components-panel-border bg-chatbot-bg shadow-xl',
+          'relative flex h-full flex-col rounded-l-2xl border border-r-0 border-components-panel-border bg-components-panel-bg shadow-xl',
         )}
         style={{ width: `${panelWidth}px` }}
       >

web/app/components/workflow/shortcuts-name.tsx

@@ -19,7 +19,7 @@ const ShortcutsName = ({
         keys.map(key => (
           <div
             key={key}
-            className='system-kbd flex h-4 w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray capitalize'
+            className='system-kbd flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray capitalize'
           >
             {getKeyboardKeyNameBySystem(key)}
           </div>