fix: formatted dataframe output in chatoutput (#6717)

* Updated Chat Output to handle Dataframe without displaying other metadata

* Updated starter examples

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes (attempt 2/3)

* Reverted change to allow md table to be displayed

* Added html support to md renderer

* added min width to markdown tables

* Fixed chat component markdown rendering

* Fixed starter examples

* [autofix.ci] apply automated fixes

* Updated versions

* Fixed rehypeRaw

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes

* fix: update get_all_flows_similar_to_project function signature and return type

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Edwin Jose <edwin.jose@datastax.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>

src/backend/base/langflow/components/outputs/chat.py

@@ -196,7 +196,11 @@ class ChatOutput(ChatComponent):
                     data = data.replace(r"^\s*$", "", regex=True)
                     # Replace multiple newlines with a single newline
                     data = data.replace(r"\n+", "\n", regex=True)
-                return data.to_markdown(index=False)
+                return (
+                    data.replace(r"\|", r"\\|", regex=True)
+                    .applymap(lambda x: (str(x).replace("\n", "<br/>") if isinstance(x, str) else x))
+                    .to_markdown(index=False)
+                )
             return str(data)
         except (ValueError, TypeError, AttributeError) as e:
             msg = f"Error converting data: {e!s}"

src/backend/base/langflow/initial_setup/setup.py

@@ -536,9 +536,9 @@ def create_new_project(
     session.add(db_flow)
 
 
-async def get_all_flows_similar_to_project(session, folder_id):
+async def get_all_flows_similar_to_project(session: AsyncSession, folder_id: UUID) -> list[Flow]:
     stmt = select(Folder).options(selectinload(Folder.flows)).where(Folder.id == folder_id)
-    return (await session.exec(stmt)).first().flows
+    return list((await session.exec(stmt)).first().flows)
 
 
 async def delete_start_projects(session, folder_id) -> None:
@@ -785,7 +785,8 @@ async def create_or_update_starter_projects(all_types_dict: dict, *, do_create:
                     # We also need to update the project data in the file
                     await update_project_file(project_path, project, updated_project_data)
             if do_create and project_name and project_data:
-                for existing_project in await get_all_flows_similar_to_project(session, new_folder.id):
+                existing_flows = await get_all_flows_similar_to_project(session, new_folder.id)
+                for existing_project in existing_flows:
                     await session.delete(existing_project)
 
                 create_new_project(

src/frontend/package.json

@@ -76,6 +76,7 @@
     "react18-json-view": "^0.2.8",
     "reactflow": "^11.11.3",
     "rehype-mathjax": "^4.0.3",
+    "rehype-raw": "^6.1.1",
     "remark-gfm": "3.0.1",
     "remark-math": "^6.0.0",
     "shadcn-ui": "^0.9.4",

src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx

@@ -1,8 +1,8 @@
-import { cn } from "@/utils/utils";
-
 import { EMPTY_OUTPUT_SEND_MESSAGE } from "@/constants/constants";
+import { cn } from "@/utils/utils";
 import Markdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
+import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import CodeTabsComponent from "../../../../../../components/core/codeTabsComponent/ChatCodeTabComponent";
 
@@ -22,9 +22,9 @@ export const MarkdownField = ({
   return (
     <div className="w-full items-baseline gap-2">
       <Markdown
-        remarkPlugins={[remarkGfm]}
+        remarkPlugins={[remarkGfm as any]}
         linkTarget="_blank"
-        rehypePlugins={[rehypeMathjax]}
+        rehypePlugins={[rehypeMathjax, rehypeRaw]}
         className={cn(
           "markdown prose flex w-fit max-w-full flex-col items-baseline text-[14px] font-normal word-break-break-word dark:prose-invert",
           isEmpty ? "text-muted-foreground" : "text-primary",

src/frontend/src/style/classes.css

@@ -282,3 +282,7 @@ input[type="search"]::-webkit-search-cancel-button {
 .react-flow__background pattern circle {
   fill: hsl(var(--canvas-dot)) !important;
 }
+
+.markdown td {
+  min-width: 78px;
+}