@@ -21,14 +21,42 @@ import {
2121import { Button } from "../ui/button" ;
2222import { MarkdownText } from "./markdown-text" ;
2323import { TooltipIconButton } from "./tooltip-icon-button" ;
24+ import { Spin , Flex } from "antd" ;
25+ import { LoadingOutlined } from "@ant-design/icons" ;
26+ import styled from "styled-components" ;
27+ const SimpleANTDLoader = ( ) => {
28+ const antIcon = < LoadingOutlined style = { { fontSize :24 } } spin /> ;
29+
30+ return (
31+ < div style = { { textAlign :'left' , width :'100%' } } >
32+ < Flex align = "center" gap = { 12 } style = { { paddingLeft :'16px' } } >
33+ < Spin indicator = { antIcon } size = "small" />
34+ < span style = { { color :'#666' , fontSize :'14px' } } > Working on it...</ span >
35+ </ Flex >
36+ </ div >
37+ ) ;
38+ } ;
39+
40+ const StyledThreadRoot = styled ( ThreadPrimitive . Root ) `
41+ /* Hide entire assistant message container when it contains running status */
42+ .aui-assistant-message-root:has([data-status="running"]) {
43+ display: none;
44+ }
45+
46+ /* Fallback for older browsers that don't support :has() */
47+ .aui-assistant-message-content [data-status="running"] {
48+ display: none;
49+ }
50+ ` ;
51+
2452
2553interface ThreadProps {
2654placeholder ?:string ;
2755}
2856
2957export const Thread :FC < ThreadProps > = ( { placeholder= "Write a message..." } ) => {
3058return (
31- < ThreadPrimitive . Root
59+ < StyledThreadRoot
3260className = "aui-root aui-thread-root"
3361style = { {
3462[ "--thread-max-width" as string ] :"42rem" ,
@@ -44,6 +72,10 @@ import {
4472AssistantMessage :AssistantMessage ,
4573} }
4674/>
75+
76+ < ThreadPrimitive . If running >
77+ < SimpleANTDLoader />
78+ </ ThreadPrimitive . If >
4779
4880< ThreadPrimitive . If empty = { false } >
4981< div className = "aui-thread-viewport-spacer" />
@@ -54,7 +86,7 @@ import {
5486< Composer placeholder = { placeholder } />
5587</ div >
5688</ ThreadPrimitive . Viewport >
57- </ ThreadPrimitive . Root >
89+ </ StyledThreadRoot >
5890) ;
5991} ;
6092