Abdul Rahman
0c73c9df50
- Added drag and drop support - The AIChatTab component has been refactored into smaller, more focused components to improve readability, maintainability, and scalability of the codebase. - Introduced a custom useAIChatFileUpload hook to encapsulate and manage file upload logic, promoting code reuse and separation of concerns. ### Demo https://github.com/user-attachments/assets/c4b2a67a-2736-48ae-9ba8-8e124e4b6069 --------- Co-authored-by: Raphaël Bosi <71827178+bosiraphael@users.noreply.github.com> Co-authored-by: neo773 <62795688+neo773@users.noreply.github.com> Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> Co-authored-by: Félix Malfait <felix.malfait@gmail.com> Co-authored-by: Félix Malfait <felix@twenty.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions <github-actions@twenty.com> Co-authored-by: MD Readul Islam <99027968+readul-islam@users.noreply.github.com> Co-authored-by: readul-islam <developer.readul@gamil.com> Co-authored-by: Thomas des Francs <tdesfrancs@gmail.com> Co-authored-by: Guillim <guillim@users.noreply.github.com> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com> Co-authored-by: Jean-Baptiste Ronssin <65334819+jbronssin@users.noreply.github.com> Co-authored-by: kahkashan shaik <93042682+kahkashanshaik@users.noreply.github.com> Co-authored-by: martmull <martmull@hotmail.fr> Co-authored-by: Paul Rastoin <45004772+prastoin@users.noreply.github.com> Co-authored-by: bosiraphael <raphael.bosi@gmail.com> Co-authored-by: Naifer <161821705+omarNaifer12@users.noreply.github.com> Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>
52 lines
1.4 KiB
TypeScript
52 lines
1.4 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};
|
|
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>
|
|
);
|
|
};
|