Charles Bochet
802a5b0af6
## Summary - Migrate ~200 files from `@emotion/styled` / `@emotion/react` to `@linaria/react` + `themeCssVariables`, continuing the zero-runtime CSS-in-JS migration (PR 2-3 of the [migration plan](docs/emotion-to-linaria-migration-plan.md)) - Modules covered: **auth** (19), **activities** (53), **ai** (30), **pages** (70), **action-menu** (3), **object-metadata** (4), **onboarding** (2), **workspace** (2), **file** (3), **error-handler** (2), **front-components** (1), **geo-map** (1), **loading** (5), **testing** (5), plus a `style` prop addition to `TableRow` - Handles `styled(FunctionComponent)<Props>` incompatibility with Linaria by using CSS custom properties via `style` + `var()` references ## Test plan - [x] `npx nx lint:diff-with-main twenty-front` passes - [x] `npx nx typecheck twenty-front` passes - [ ] Visual spot-check of auth, onboarding, settings, activities, and AI chat screens - [ ] No remaining `@emotion/styled` or `@emotion/react` imports in migrated files Made with [Cursor](https://cursor.com)
110 lines
3.0 KiB
TypeScript
110 lines
3.0 KiB
TypeScript
import { useAIChatThreadClick } from '@/ai/hooks/useAIChatThreadClick';
|
|
import { styled } from '@linaria/react';
|
|
import { useContext } from 'react';
|
|
import { useLingui } from '@lingui/react/macro';
|
|
import { IconSparkles } from 'twenty-ui/display';
|
|
import { ThemeContext } from 'twenty-ui/theme';
|
|
import { themeCssVariables } from 'twenty-ui/theme-constants';
|
|
import { type AgentChatThread } from '~/generated-metadata/graphql';
|
|
|
|
const StyledThreadsList = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${themeCssVariables.spacing[1]};
|
|
`;
|
|
|
|
const StyledDateGroup = styled.div`
|
|
margin-bottom: ${themeCssVariables.spacing[4]};
|
|
`;
|
|
|
|
const StyledDateHeader = styled.div`
|
|
color: ${themeCssVariables.font.color.light};
|
|
font-size: ${themeCssVariables.font.size.xs};
|
|
font-weight: ${themeCssVariables.font.weight.medium};
|
|
margin-bottom: ${themeCssVariables.spacing[1]};
|
|
`;
|
|
|
|
const StyledThreadItem = styled.div<{ isSelected?: boolean }>`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: ${themeCssVariables.spacing[2]};
|
|
border-radius: ${themeCssVariables.border.radius.sm};
|
|
transition: all 0.2s ease;
|
|
margin-bottom: ${themeCssVariables.spacing[1]};
|
|
border-left: 3px solid transparent;
|
|
cursor: pointer;
|
|
padding: ${themeCssVariables.spacing[1]} 1px;
|
|
right: 3px;
|
|
position: relative;
|
|
width: calc(100% + 1px);
|
|
|
|
&:hover {
|
|
background: ${themeCssVariables.background.transparent.light};
|
|
}
|
|
`;
|
|
|
|
const StyledSparkleIcon = styled.div`
|
|
align-items: center;
|
|
background: ${themeCssVariables.background.transparent.blue};
|
|
border-radius: ${themeCssVariables.border.radius.sm};
|
|
display: flex;
|
|
padding: ${themeCssVariables.spacing[1]};
|
|
justify-content: center;
|
|
`;
|
|
|
|
const StyledThreadContent = styled.div`
|
|
flex: 1;
|
|
min-width: 0;
|
|
`;
|
|
|
|
const StyledThreadTitle = styled.div`
|
|
color: ${themeCssVariables.font.color.secondary};
|
|
font-size: ${themeCssVariables.font.size.md};
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
`;
|
|
|
|
export const AIChatThreadGroup = ({
|
|
threads,
|
|
title,
|
|
}: {
|
|
threads: AgentChatThread[];
|
|
title: string;
|
|
}) => {
|
|
const { t } = useLingui();
|
|
const { theme } = useContext(ThemeContext);
|
|
const { handleThreadClick } = useAIChatThreadClick();
|
|
|
|
if (threads.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<StyledDateGroup>
|
|
<StyledDateHeader>{title}</StyledDateHeader>
|
|
<StyledThreadsList>
|
|
{threads.map((thread) => (
|
|
<StyledThreadItem
|
|
onClick={() => handleThreadClick(thread)}
|
|
key={thread.id}
|
|
>
|
|
<StyledSparkleIcon>
|
|
<IconSparkles
|
|
size={theme.icon.size.md}
|
|
color={theme.color.blue}
|
|
/>
|
|
</StyledSparkleIcon>
|
|
<StyledThreadContent>
|
|
<StyledThreadTitle>
|
|
{thread.title || t`Untitled`}
|
|
</StyledThreadTitle>
|
|
</StyledThreadContent>
|
|
</StyledThreadItem>
|
|
))}
|
|
</StyledThreadsList>
|
|
</StyledDateGroup>
|
|
);
|
|
};
|