jh-block
84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
import GooseLogo from './GooseLogo';
|
|
import AnimatedIcons from './AnimatedIcons';
|
|
import FlyingBird from './FlyingBird';
|
|
import { ChatState } from '../types/chatState';
|
|
import { defineMessages, useIntl } from '../i18n';
|
|
|
|
interface LoadingGooseProps {
|
|
message?: string;
|
|
chatState?: ChatState;
|
|
}
|
|
|
|
const i18n = defineMessages({
|
|
loadingConversation: {
|
|
id: 'loadingGoose.loadingConversation',
|
|
defaultMessage: 'loading conversation...',
|
|
},
|
|
thinking: {
|
|
id: 'loadingGoose.thinking',
|
|
defaultMessage: 'goose is thinking…',
|
|
},
|
|
streaming: {
|
|
id: 'loadingGoose.streaming',
|
|
defaultMessage: 'goose is working on it…',
|
|
},
|
|
waiting: {
|
|
id: 'loadingGoose.waiting',
|
|
defaultMessage: 'goose is waiting…',
|
|
},
|
|
compacting: {
|
|
id: 'loadingGoose.compacting',
|
|
defaultMessage: 'goose is compacting the conversation...',
|
|
},
|
|
idle: {
|
|
id: 'loadingGoose.idle',
|
|
defaultMessage: 'goose is working on it…',
|
|
},
|
|
restartingAgent: {
|
|
id: 'loadingGoose.restartingAgent',
|
|
defaultMessage: 'restarting session...',
|
|
},
|
|
});
|
|
|
|
const STATE_ICONS: Record<ChatState, React.ReactNode> = {
|
|
[ChatState.LoadingConversation]: <AnimatedIcons className="flex-shrink-0" cycleInterval={600} />,
|
|
[ChatState.Thinking]: <AnimatedIcons className="flex-shrink-0" cycleInterval={600} />,
|
|
[ChatState.Streaming]: <FlyingBird className="flex-shrink-0" cycleInterval={150} />,
|
|
[ChatState.WaitingForUserInput]: (
|
|
<AnimatedIcons className="flex-shrink-0" cycleInterval={600} variant="waiting" />
|
|
),
|
|
[ChatState.Compacting]: <AnimatedIcons className="flex-shrink-0" cycleInterval={600} />,
|
|
[ChatState.Idle]: <GooseLogo size="small" hover={false} />,
|
|
[ChatState.RestartingAgent]: <AnimatedIcons className="flex-shrink-0" cycleInterval={600} />,
|
|
};
|
|
|
|
const STATE_MESSAGE_KEYS: Record<ChatState, keyof typeof i18n> = {
|
|
[ChatState.LoadingConversation]: 'loadingConversation',
|
|
[ChatState.Thinking]: 'thinking',
|
|
[ChatState.Streaming]: 'streaming',
|
|
[ChatState.WaitingForUserInput]: 'waiting',
|
|
[ChatState.Compacting]: 'compacting',
|
|
[ChatState.Idle]: 'idle',
|
|
[ChatState.RestartingAgent]: 'restartingAgent',
|
|
};
|
|
|
|
const LoadingGoose = ({ message, chatState = ChatState.Idle }: LoadingGooseProps) => {
|
|
const intl = useIntl();
|
|
const displayMessage = message || intl.formatMessage(i18n[STATE_MESSAGE_KEYS[chatState]]);
|
|
const icon = STATE_ICONS[chatState];
|
|
|
|
return (
|
|
<div className="w-full animate-fade-slide-up">
|
|
<div
|
|
data-testid="loading-indicator"
|
|
className="flex items-center gap-2 text-xs text-text-primary py-2"
|
|
>
|
|
{icon}
|
|
{displayMessage}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoadingGoose;
|