From 218e247fd2f8dfbd325047413f2d013f4bbc9cbf Mon Sep 17 00:00:00 2001
From: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Date: Mon, 18 Aug 2025 11:12:47 +0800
Subject: [PATCH] refactor: improve loading animation and debug panel styles
 (#24075)

---
 web/app/components/base/chat/chat/loading-anim/index.tsx      | 3 ++-
 web/app/components/workflow/panel/debug-and-preview/index.tsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/app/components/base/chat/chat/loading-anim/index.tsx b/web/app/components/base/chat/chat/loading-anim/index.tsx
index dd43ef9c1..801c89fce 100644
--- a/web/app/components/base/chat/chat/loading-anim/index.tsx
+++ b/web/app/components/base/chat/chat/loading-anim/index.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 export type ILoadingAnimProps = {
   type: 'text' | 'avatar'
@@ -11,7 +12,7 @@ const LoadingAnim: FC<ILoadingAnimProps> = ({
   type,
 }) => {
   return (
-    <div className={`${s['dot-flashing']} ${s[type]}`}></div>
+    <div className={cn(s['dot-flashing'], s[type])} />
   )
 }
 export default React.memo(LoadingAnim)
diff --git a/web/app/components/workflow/panel/debug-and-preview/index.tsx b/web/app/components/workflow/panel/debug-and-preview/index.tsx
index ed3f29e87..baf4c21dc 100644
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/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-components-panel-bg shadow-xl',
+          'relative flex h-full flex-col rounded-l-2xl border border-r-0 border-components-panel-border bg-chatbot-bg shadow-xl',
         )}
         style={{ width: `${panelWidth}px` }}
       >