From 2e359f5585554c06dc6358dbe33f137e4c270fea Mon Sep 17 00:00:00 2001
From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com>
Date: Tue, 11 Nov 2025 15:38:26 +0530
Subject: [PATCH] Fix AI table scroll overflow and tool input display (#15753)

- Fixed horizontal scroll overflow when tables appear in AI responses
- Fixed tool call input display to show only user-relevant input instead
of internal metadata (loadingMessage)

### Before

https://github.com/user-attachments/assets/870bf52d-7ffd-464e-9240-bd482ab19077


### After


https://github.com/user-attachments/assets/40a19fc0-6989-437f-b712-8141368179dc
---
 .../modules/ai/components/AIChatMessage.tsx   |  1 +
 .../ai/components/LazyMarkdownRenderer.tsx    | 49 +++++++++++++++++--
 .../ai/components/ToolStepRenderer.tsx        |  7 ++-
 3 files changed, 51 insertions(+), 6 deletions(-)

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 }) => (
-      <Markdown remarkPlugins={[remarkGfm]}>{children}</Markdown>
+    default: ({
+      children,
+      TableScrollContainer,
+    }: {
+      children: string;
+      TableScrollContainer: React.ComponentType<{ children: React.ReactNode }>;
+    }) => (
+      <Markdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          table: ({ children }) => (
+            <TableScrollContainer>
+              <table>{children}</table>
+            </TableScrollContainer>
+          ),
+        }}
+      >
+        {children}
+      </Markdown>
     ),
   };
 });
 
+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 (
     <Suspense fallback={<LoadingSkeleton />}>
-      <MarkdownRenderer>{text}</MarkdownRenderer>
+      <MarkdownRenderer TableScrollContainer={StyledTableScrollContainer}>
+        {text}
+      </MarkdownRenderer>
     </Suspense>
   );
 };
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 }) => {
                 <StyledJsonTreeContainer>
                   <JsonTree
                     value={
-                      (activeTab === 'output' ? result : input) as JsonValue
+                      (activeTab === 'output' ? result : toolInput) as JsonValue
                     }
                     shouldExpandNodeInitially={() => false}
                     emptyArrayLabel={t`Empty Array`}