colorized think with ANSI to HTML

src/backend/langflow/interface/run.py

@@ -66,9 +66,7 @@ def process_graph(data_graph: Dict[str, Any]):
     logger.debug("Saved langchain object to cache")
     return {
         "result": str(result),
-        "thought": re.sub(
+        "thought": thought.strip()
-            r"\x1b\[([0-9,A-Z]{1,2}(;[0-9,A-Z]{1,2})?)?[m|K]", "", thought
-        ).strip(),
     }
 
 

src/frontend/package-lock.json

@@ -22,6 +22,7 @@
                 "@types/react": "^18.0.27",
                 "@types/react-dom": "^18.0.10",
                 "ace-builds": "^1.16.0",
+                "ansi-to-html": "^0.7.2",
                 "axios": "^1.3.2",
                 "lodash": "^4.17.21",
                 "react": "^18.2.0",
@@ -5315,6 +5316,20 @@
                 "node": ">=4"
             }
         },
+        "node_modules/ansi-to-html": {
+            "version": "0.7.2",
+            "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.2.tgz",
+            "integrity": "sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==",
+            "dependencies": {
+                "entities": "^2.2.0"
+            },
+            "bin": {
+                "ansi-to-html": "bin/ansi-to-html"
+            },
+            "engines": {
+                "node": ">=8.0.0"
+            }
+        },
         "node_modules/anymatch": {
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",

src/frontend/package.json

@@ -17,6 +17,7 @@
         "@types/react": "^18.0.27",
         "@types/react-dom": "^18.0.10",
         "ace-builds": "^1.16.0",
+        "ansi-to-html": "^0.7.2",
         "axios": "^1.3.2",
         "lodash": "^4.17.21",
         "react": "^18.2.0",
@@ -58,5 +59,5 @@
             "last 1 safari version"
         ]
     },
-    "proxy": "http://backend:7860"
+    "proxy": "http://localhost:7860"
-}
+}

src/frontend/src/components/chatComponent/chatMessage/index.tsx

@@ -2,6 +2,8 @@ import { ChatBubbleLeftEllipsisIcon, ChatBubbleOvalLeftEllipsisIcon, PlusSmallIc
 import { useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { nodeColors } from "../../../utils";
+var Convert = require('ansi-to-html');
+var convert = new Convert({newline:true});
 
 export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 	const [hidden, setHidden] = useState(true);
@@ -27,7 +29,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 								style={{ backgroundColor: nodeColors["thought"] }}
 								className=" text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer"
 								dangerouslySetInnerHTML={{
-									__html: chat.thought.replace(/\n/g, "<br />"),
+									__html: convert.toHtml(chat.thought)
 								}}
 							></div>
 						)}

src/frontend/src/components/chatComponent/index.tsx

@@ -13,6 +13,7 @@ import { TabsContext } from "../../contexts/tabsContext";
 import { ChatType } from "../../types/chat";
 import ChatMessage from "./chatMessage";
 
+
 const _ = require("lodash");
 
 export default function Chat({ flow, reactFlowInstance }: ChatType) {
@@ -99,7 +100,7 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
 
 				sendAll({ ...reactFlowInstance.toObject(), message, chatHistory,name:flow.name,description:flow.description})
 					.then((r) => {
-						addChatHistory(r.data.result, false, r.data.thought);
+						addChatHistory(r.data.result, false,r.data.thought);
 						setLockChat(false);
 					})
 					.catch((error) => {