diff --git a/packages/twenty-front/src/modules/ai/components/AIChatMessage.tsx b/packages/twenty-front/src/modules/ai/components/AIChatMessage.tsx
index 02b4de3ce2..477874736d 100644
--- a/packages/twenty-front/src/modules/ai/components/AIChatMessage.tsx
+++ b/packages/twenty-front/src/modules/ai/components/AIChatMessage.tsx
@@ -132,6 +132,7 @@ const StyledAvatarContainer = styled.div<{ isUser?: boolean }>`
`;
const StyledMessageContainer = styled.div`
+ min-width: 0;
width: 100%;
`;
diff --git a/packages/twenty-front/src/modules/ai/components/LazyMarkdownRenderer.tsx b/packages/twenty-front/src/modules/ai/components/LazyMarkdownRenderer.tsx
index 5142d09328..e3fd0693b5 100644
--- a/packages/twenty-front/src/modules/ai/components/LazyMarkdownRenderer.tsx
+++ b/packages/twenty-front/src/modules/ai/components/LazyMarkdownRenderer.tsx
@@ -1,8 +1,8 @@
-import { lazy, Suspense } from 'react';
+import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
+import { lazy, Suspense } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
const MarkdownRenderer = lazy(async () => {
const [{ default: Markdown }, { default: remarkGfm }] = await Promise.all([
@@ -11,12 +11,49 @@ const MarkdownRenderer = lazy(async () => {
]);
return {
- default: ({ children }: { children: string }) => (
- {children}
+ default: ({
+ children,
+ TableScrollContainer,
+ }: {
+ children: string;
+ TableScrollContainer: React.ComponentType<{ children: React.ReactNode }>;
+ }) => (
+ (
+
+
+
+ ),
+ }}
+ >
+ {children}
+
),
};
});
+const StyledTableScrollContainer = styled.div`
+ overflow-x: auto;
+
+ table {
+ border-collapse: collapse;
+ margin-block: ${({ theme }) => theme.spacing(2)};
+ }
+
+ th,
+ td {
+ border: ${({ theme }) => `1px solid ${theme.border.color.light}`};
+ padding: ${({ theme }) => theme.spacing(2)};
+ }
+
+ th {
+ background-color: ${({ theme }) => theme.background.secondary};
+ font-weight: ${({ theme }) => theme.font.weight.medium};
+ }
+`;
+
const StyledSkeletonContainer = styled.div`
display: flex;
flex-direction: column;
@@ -62,7 +99,9 @@ const LoadingSkeleton = () => {
export const LazyMarkdownRenderer = ({ text }: { text: string }) => {
return (
}>
- {text}
+
+ {text}
+
);
};
diff --git a/packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx b/packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx
index 5b47d2476b..accc26a635 100644
--- a/packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx
+++ b/packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx
@@ -109,6 +109,11 @@ export const ToolStepRenderer = ({ toolPart }: { toolPart: ToolUIPart }) => {
const { input, output, type, errorText } = toolPart;
const toolName = type.split('-')[1];
+ const toolInput =
+ isDefined(input) && typeof input === 'object' && 'input' in input
+ ? input.input
+ : input;
+
const hasError = isDefined(errorText);
const isExpandable = isDefined(output) || hasError;
@@ -185,7 +190,7 @@ export const ToolStepRenderer = ({ toolPart }: { toolPart: ToolUIPart }) => {
false}
emptyArrayLabel={t`Empty Array`}