Fix AI chat infinite loading shimmer on empty workspace (#17521)

## 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>

packages/twenty-front/src/modules/ai/components/AIChatEmptyState.tsx

@@ -24,6 +24,7 @@ const StyledSparkleIcon = styled.div`
 
 const StyledTitle = styled.div`
   font-size: ${({ theme }) => theme.font.size.lg};
+  color: ${({ theme }) => theme.font.color.primary};
   font-weight: 600;
 `;
 

packages/twenty-front/src/modules/ai/components/LazyMarkdownRenderer.tsx

@@ -72,9 +72,11 @@ const MarkdownRenderer = lazy(async () => {
     default: ({
       children,
       TableScrollContainer,
+      StyledParagraph,
     }: {
       children: string;
       TableScrollContainer: React.ComponentType<{ children: React.ReactNode }>;
+      StyledParagraph: React.ComponentType<{ children: React.ReactNode }>;
     }) => (
       <Markdown
         remarkPlugins={[remarkGfm]}
@@ -84,7 +86,11 @@ const MarkdownRenderer = lazy(async () => {
               <table>{children}</table>
             </TableScrollContainer>
           ),
-          p: ({ children }) => <p>{processChildrenForRecordLinks(children)}</p>,
+          p: ({ children }) => (
+            <StyledParagraph>
+              {processChildrenForRecordLinks(children)}
+            </StyledParagraph>
+          ),
           li: ({ children }) => (
             <li>{processChildrenForRecordLinks(children)}</li>
           ),
@@ -116,6 +122,19 @@ const StyledTableScrollContainer = styled.div`
   }
 `;
 
+// Using div instead of p to allow RecordLink (which contains div elements) as children
+const StyledParagraph = styled.div`
+  margin-block: 1em;
+
+  &:first-child {
+    margin-block-start: 0;
+  }
+
+  &:last-child {
+    margin-block-end: 0;
+  }
+`;
+
 const StyledSkeletonContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -161,7 +180,10 @@ const LoadingSkeleton = () => {
 export const LazyMarkdownRenderer = ({ text }: { text: string }) => {
   return (
     <Suspense fallback={<LoadingSkeleton />}>
-      <MarkdownRenderer TableScrollContainer={StyledTableScrollContainer}>
+      <MarkdownRenderer
+        TableScrollContainer={StyledTableScrollContainer}
+        StyledParagraph={StyledParagraph}
+      >
         {text}
       </MarkdownRenderer>
     </Suspense>