Félix Malfait
81eaee81a8
## Summary Fixes an issue where the AI chat would show loading shimmers indefinitely when opened on a workspace with no conversation history. **Root cause:** The `isLoading` state in `useAgentChat` included `!currentAIChatThread`. On workspaces with no chat threads, `currentAIChatThread` remained `null`, causing `isLoading` to be permanently `true`. **Changes:** - Remove `!currentAIChatThread` from `isLoading` calculation in `useAgentChat` - this state should only reflect streaming/file selection status - Auto-create a chat thread in `useAgentChatData` when the threads query returns empty, ensuring a valid thread exists for the `useChat` hook to initialize properly - Add primary font color to empty state title for better visibility ## Test plan 1. Create a new workspace or use a workspace with no AI chat history 2. Open the AI chat 3. Verify the empty state shows (not infinite loading shimmer) 4. Send a message and verify it works correctly Made with [Cursor](https://cursor.com) --------- Co-authored-by: Cursor <cursoragent@cursor.com>
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
import { t } from '@lingui/core/macro';
|
|
import { IconSparkles } from 'twenty-ui/display';
|
|
const StyledEmptyState = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
`;
|
|
|
|
const StyledSparkleIcon = styled.div`
|
|
align-items: center;
|
|
background: ${({ theme }) => theme.background.transparent.blue};
|
|
border-radius: ${({ theme }) => theme.border.radius.sm};
|
|
padding: ${({ theme }) => theme.spacing(2.5)};
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
|
|
const StyledTitle = styled.div`
|
|
font-size: ${({ theme }) => theme.font.size.lg};
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
font-weight: 600;
|
|
`;
|
|
|
|
const StyledDescription = styled.div`
|
|
color: ${({ theme }) => theme.font.color.secondary};
|
|
text-align: center;
|
|
max-width: 85%;
|
|
font-size: ${({ theme }) => theme.font.size.md};
|
|
`;
|
|
|
|
export const AIChatEmptyState = () => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<StyledEmptyState>
|
|
<StyledSparkleIcon>
|
|
<IconSparkles size={theme.icon.size.lg} color={theme.color.blue} />
|
|
</StyledSparkleIcon>
|
|
<StyledTitle>{t`Chat`}</StyledTitle>
|
|
<StyledDescription>
|
|
{t`Start a conversation with your AI agent to get workflow insights, task assistance, and process guidance`}
|
|
</StyledDescription>
|
|
</StyledEmptyState>
|
|
);
|
|
};
|