From ba4bb63a1f4466bc1ae532ad3cdb8e7d1567577c Mon Sep 17 00:00:00 2001
From: asminkarki012 <asminkarki09@gmail.com>
Date: Fri, 4 Apr 2025 18:36:45 +0545
Subject: [PATCH 01/26] feat[mermaid]:integration of mermaid

---
 frontend/package-lock.json                    | 1311 ++++++++++++++++-
 frontend/package.json                         |    2 +
 frontend/src/components/MermaidRenderer.tsx   |  297 ++++
 .../src/conversation/ConversationBubble.tsx   |   35 +-
 4 files changed, 1626 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/components/MermaidRenderer.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d70a202f..884d9adc 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,6 +12,7 @@
         "chart.js": "^4.4.4",
         "i18next": "^24.2.0",
         "i18next-browser-languagedetector": "^8.0.2",
+        "mermaid": "^11.6.0",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-chartjs-2": "^5.3.0",
@@ -29,6 +30,7 @@
         "remark-math": "^6.0.0"
       },
       "devDependencies": {
+        "@types/mermaid": "^9.1.0",
         "@types/react": "^18.0.27",
         "@types/react-dom": "^18.3.0",
         "@types/react-helmet": "^6.1.11",
@@ -82,6 +84,28 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@antfu/install-pkg": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.0.0.tgz",
+      "integrity": "sha512-xvX6P/lo1B3ej0OsaErAjqgFYzYVcJpamjLAFLYh9vRJngBrMoUG7aVnrGTeqM7yxbyTD5p3F2+0/QUEh8Vzhw==",
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^0.2.8",
+        "tinyexec": "^0.3.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@antfu/utils": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-8.1.1.tgz",
+      "integrity": "sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.26.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
@@ -361,6 +385,51 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@braintree/sanitize-url": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-7.1.1.tgz",
+      "integrity": "sha512-i1L7noDNxtFyL5DmZafWy1wRVhGehQmzZaz1HiN5e7iylJMSZR7ekOV7NsIqa5qBldlLrsKv4HbgFUVlQrz8Mw==",
+      "license": "MIT"
+    },
+    "node_modules/@chevrotain/cst-dts-gen": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-11.0.3.tgz",
+      "integrity": "sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@chevrotain/gast": "11.0.3",
+        "@chevrotain/types": "11.0.3",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@chevrotain/gast": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-11.0.3.tgz",
+      "integrity": "sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@chevrotain/types": "11.0.3",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@chevrotain/regexp-to-ast": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/regexp-to-ast/-/regexp-to-ast-11.0.3.tgz",
+      "integrity": "sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@chevrotain/types": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-11.0.3.tgz",
+      "integrity": "sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@chevrotain/utils": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-11.0.3.tgz",
+      "integrity": "sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -835,6 +904,40 @@
       "deprecated": "Use @eslint/object-schema instead",
       "dev": true
     },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.3.0.tgz",
+      "integrity": "sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.0.0",
+        "@antfu/utils": "^8.1.0",
+        "@iconify/types": "^2.0.0",
+        "debug": "^4.4.0",
+        "globals": "^15.14.0",
+        "kolorist": "^1.8.0",
+        "local-pkg": "^1.0.0",
+        "mlly": "^1.7.4"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/globals": {
+      "version": "15.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
+      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -971,6 +1074,15 @@
       "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
       "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
     },
+    "node_modules/@mermaid-js/parser": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@mermaid-js/parser/-/parser-0.4.0.tgz",
+      "integrity": "sha512-wla8XOWvQAwuqy+gxiZqY+c7FokraOTHRWMsbB4AgRx9Sy7zKslNyejy7E+a77qHfey5GXw/ik3IXv/NHMJgaA==",
+      "license": "MIT",
+      "dependencies": {
+        "langium": "3.3.1"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1547,6 +1659,259 @@
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
       "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
     },
+    "node_modules/@types/d3": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.6.tgz",
+      "integrity": "sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -1568,6 +1933,12 @@
         "@types/estree": "*"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
+    },
     "node_modules/@types/hast": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
@@ -1611,6 +1982,13 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/mermaid": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@types/mermaid/-/mermaid-9.1.0.tgz",
+      "integrity": "sha512-rc8QqhveKAY7PouzY/p8ljS+eBSNCv7o79L97RSub/Ic2SQ34ph1Ng3s8wFLWVjvaEt6RLOWtSCsgYWd95NY8A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/ms": {
       "version": "0.7.34",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
@@ -1635,7 +2013,7 @@
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -1670,6 +2048,13 @@
       "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==",
       "dev": true
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -2078,10 +2463,10 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.12.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
-      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
-      "dev": true,
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
+      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+      "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2684,6 +3069,32 @@
         "pnpm": ">=8"
       }
     },
+    "node_modules/chevrotain": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz",
+      "integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@chevrotain/cst-dts-gen": "11.0.3",
+        "@chevrotain/gast": "11.0.3",
+        "@chevrotain/regexp-to-ast": "11.0.3",
+        "@chevrotain/types": "11.0.3",
+        "@chevrotain/utils": "11.0.3",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/chevrotain-allstar": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/chevrotain-allstar/-/chevrotain-allstar-0.3.1.tgz",
+      "integrity": "sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash-es": "^4.17.21"
+      },
+      "peerDependencies": {
+        "chevrotain": "^11.0.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -2787,6 +3198,12 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/confbox": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
+      "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
+      "license": "MIT"
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2809,6 +3226,15 @@
         "toggle-selection": "^1.0.6"
       }
     },
+    "node_modules/cose-base": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz",
+      "integrity": "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==",
+      "license": "MIT",
+      "dependencies": {
+        "layout-base": "^1.0.0"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "8.3.6",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
@@ -2867,6 +3293,514 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
       "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
+    "node_modules/cytoscape": {
+      "version": "3.31.2",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.31.2.tgz",
+      "integrity": "sha512-/eOXg2uGdMdpGlEes5Sf6zE+jUG+05f3htFNQIxLxduOH/SsaUZiPBfAwP1btVIVzsnhiNOdi+hvDRLYfMZjGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/cytoscape-cose-bilkent": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz",
+      "integrity": "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cose-base": "^1.0.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
+    "node_modules/cytoscape-fcose": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz",
+      "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cose-base": "^2.2.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
+    "node_modules/cytoscape-fcose/node_modules/cose-base": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz",
+      "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==",
+      "license": "MIT",
+      "dependencies": {
+        "layout-base": "^2.0.0"
+      }
+    },
+    "node_modules/cytoscape-fcose/node_modules/layout-base": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz",
+      "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==",
+      "license": "MIT"
+    },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-sankey": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1 - 2",
+        "d3-shape": "^1.2.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-sankey/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dagre-d3-es": {
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.11.tgz",
+      "integrity": "sha512-tvlJLyQf834SylNKax8Wkzco/1ias1OPw8DcUMDE7oUIoSEW25riQVuiu/0OWEFqT0cxHT3Pa9/D82Jr47IONw==",
+      "license": "MIT",
+      "dependencies": {
+        "d3": "^7.9.0",
+        "lodash-es": "^4.17.21"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -2918,6 +3852,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -2986,6 +3926,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -3042,6 +3991,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.5.tgz",
+      "integrity": "sha512-mLPd29uoRe9HpvwP2TxClGQBzGXeEC/we/q+bFlmPPmj2p2Ugl3r6ATu/UU1v77DXNcehiBg9zsr1dREyA/dJQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dot-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
@@ -4063,6 +5021,12 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/exsolve": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.4.tgz",
+      "integrity": "sha512-xsZH6PXaER4XoV+NiT7JHp1bJodJVT+cxeSH1G0f0tlT0lJqYuHUP3bUx2HtfTDvOagMINYp8rsqusxud3RXhw==",
+      "license": "MIT"
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -4508,6 +5472,12 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
+    "node_modules/hachure-fill": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/hachure-fill/-/hachure-fill-0.5.2.tgz",
+      "integrity": "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==",
+      "license": "MIT"
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -5003,6 +5973,18 @@
         "@babel/runtime": "^7.23.2"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -5081,6 +6063,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-alphabetical": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
@@ -5685,6 +6676,39 @@
         "node": ">= 12"
       }
     },
+    "node_modules/khroma": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/khroma/-/khroma-2.1.0.tgz",
+      "integrity": "sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw=="
+    },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "license": "MIT"
+    },
+    "node_modules/langium": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/langium/-/langium-3.3.1.tgz",
+      "integrity": "sha512-QJv/h939gDpvT+9SiLVlY7tZC3xB2qK57v0J04Sh9wpMb6MP1q8gB21L3WIo8T5P1MSMg3Ep14L7KkDCFG3y4w==",
+      "license": "MIT",
+      "dependencies": {
+        "chevrotain": "~11.0.3",
+        "chevrotain-allstar": "~0.3.0",
+        "vscode-languageserver": "~9.0.1",
+        "vscode-languageserver-textdocument": "~1.0.11",
+        "vscode-uri": "~3.0.8"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/layout-base": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz",
+      "integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==",
+      "license": "MIT"
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -5760,6 +6784,23 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/local-pkg": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.1.tgz",
+      "integrity": "sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==",
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.0.1",
+        "quansync": "^0.2.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -5775,6 +6816,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -5924,6 +6971,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/marked": {
+      "version": "15.0.7",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.7.tgz",
+      "integrity": "sha512-dgLIeKGLx5FwziAnsk4ONoGwHwGPJzselimvlVskE9XLN4Orv9u2VA3GWw/lYUqjfA0rUT/6fqKwfZJapP9BEg==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -6356,6 +7415,34 @@
         "node": ">= 8"
       }
     },
+    "node_modules/mermaid": {
+      "version": "11.6.0",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-11.6.0.tgz",
+      "integrity": "sha512-PE8hGUy1LDlWIHWBP05SFdqUHGmRcCcK4IzpOKPE35eOw+G9zZgcnMpyunJVUEOgb//KBORPjysKndw8bFLuRg==",
+      "license": "MIT",
+      "dependencies": {
+        "@braintree/sanitize-url": "^7.0.4",
+        "@iconify/utils": "^2.1.33",
+        "@mermaid-js/parser": "^0.4.0",
+        "@types/d3": "^7.4.3",
+        "cytoscape": "^3.29.3",
+        "cytoscape-cose-bilkent": "^4.1.0",
+        "cytoscape-fcose": "^2.2.0",
+        "d3": "^7.9.0",
+        "d3-sankey": "^0.12.3",
+        "dagre-d3-es": "7.0.11",
+        "dayjs": "^1.11.13",
+        "dompurify": "^3.2.4",
+        "katex": "^0.16.9",
+        "khroma": "^2.1.0",
+        "lodash-es": "^4.17.21",
+        "marked": "^15.0.7",
+        "roughjs": "^4.6.6",
+        "stylis": "^4.3.6",
+        "ts-dedent": "^2.2.0",
+        "uuid": "^11.1.0"
+      }
+    },
     "node_modules/micromark": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.0.tgz",
@@ -6977,6 +8064,35 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mlly": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
+      "integrity": "sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "pathe": "^2.0.1",
+        "pkg-types": "^1.3.0",
+        "ufo": "^1.5.4"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -7306,6 +8422,15 @@
       "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
       "dev": true
     },
+    "node_modules/package-manager-detector": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-0.2.11.tgz",
+      "integrity": "sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "quansync": "^0.2.7"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -7374,6 +8499,12 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/path-data-parser": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/path-data-parser/-/path-data-parser-0.1.0.tgz",
+      "integrity": "sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==",
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -7438,6 +8569,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -7486,6 +8623,33 @@
         "node": ">= 6"
       }
     },
+    "node_modules/pkg-types": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.1.0.tgz",
+      "integrity": "sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.1",
+        "exsolve": "^1.0.1",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/points-on-curve": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/points-on-curve/-/points-on-curve-0.2.0.tgz",
+      "integrity": "sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==",
+      "license": "MIT"
+    },
+    "node_modules/points-on-path": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/points-on-path/-/points-on-path-0.2.1.tgz",
+      "integrity": "sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==",
+      "license": "MIT",
+      "dependencies": {
+        "path-data-parser": "0.1.0",
+        "points-on-curve": "0.2.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -7789,6 +8953,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/quansync": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.10.tgz",
+      "integrity": "sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -8384,6 +9564,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+      "license": "Unlicense"
+    },
     "node_modules/rollup": {
       "version": "4.22.4",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.4.tgz",
@@ -8419,6 +9605,18 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/roughjs": {
+      "version": "4.6.6",
+      "resolved": "https://registry.npmjs.org/roughjs/-/roughjs-4.6.6.tgz",
+      "integrity": "sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "hachure-fill": "^0.5.2",
+        "path-data-parser": "^0.1.0",
+        "points-on-curve": "^0.2.0",
+        "points-on-path": "^0.2.1"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -8442,6 +9640,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/safe-array-concat": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
@@ -8494,6 +9698,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -8990,6 +10200,12 @@
         "inline-style-parser": "0.2.3"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
+      "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
+      "license": "MIT"
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -9183,6 +10399,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tinyexec": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -9218,6 +10440,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/ts-dedent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
+      "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.10"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -9376,7 +10607,7 @@
       "version": "5.7.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
       "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9385,6 +10616,12 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/ufo": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
+      "integrity": "sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==",
+      "license": "MIT"
+    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
@@ -9564,6 +10801,19 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/uuid": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+      "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
     "node_modules/vfile": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.2.tgz",
@@ -9688,6 +10938,55 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/vscode-jsonrpc": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",
+      "integrity": "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/vscode-languageserver": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-9.0.1.tgz",
+      "integrity": "sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==",
+      "license": "MIT",
+      "dependencies": {
+        "vscode-languageserver-protocol": "3.17.5"
+      },
+      "bin": {
+        "installServerIntoExtension": "bin/installServerIntoExtension"
+      }
+    },
+    "node_modules/vscode-languageserver-protocol": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz",
+      "integrity": "sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==",
+      "license": "MIT",
+      "dependencies": {
+        "vscode-jsonrpc": "8.2.0",
+        "vscode-languageserver-types": "3.17.5"
+      }
+    },
+    "node_modules/vscode-languageserver-textdocument": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
+      "integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==",
+      "license": "MIT"
+    },
+    "node_modules/vscode-languageserver-types": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz",
+      "integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==",
+      "license": "MIT"
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
+      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
+      "license": "MIT"
+    },
     "node_modules/web-namespaces": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 89a55b04..80887ce4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
     "chart.js": "^4.4.4",
     "i18next": "^24.2.0",
     "i18next-browser-languagedetector": "^8.0.2",
+    "mermaid": "^11.6.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.3.0",
@@ -40,6 +41,7 @@
     "remark-math": "^6.0.0"
   },
   "devDependencies": {
+    "@types/mermaid": "^9.1.0",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
new file mode 100644
index 00000000..569dfdc2
--- /dev/null
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -0,0 +1,297 @@
+import React, { useEffect, useRef, useState } from 'react';
+import mermaid from 'mermaid';
+import CopyButton from './CopyButton';
+import { useSelector } from 'react-redux';
+import { selectStatus } from '../conversation/conversationSlice';
+
+interface MermaidRendererProps {
+  code: string;
+  isDarkTheme: boolean;
+}
+
+const MermaidRenderer: React.FC<MermaidRendererProps> = ({
+  code,
+  isDarkTheme,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const status = useSelector(selectStatus);
+  const [svgContent, setSvgContent] = useState<string>('');
+  const [error, setError] = useState<string | null>(null);
+  const [showCode, setShowCode] = useState<boolean>(false);
+  const [showDownloadMenu, setShowDownloadMenu] = useState<boolean>(false);
+  const downloadMenuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (status === 'loading' || !code) return;
+    // Initialize mermaid with the current theme
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: isDarkTheme ? 'dark' : 'default',
+      securityLevel: 'loose',
+    });
+    const renderDiagram = async (): Promise<void> => {
+      try {
+        // Generate unique ID
+        const id = `mermaid-${Math.random().toString(36).substring(2, 9)}`;
+
+        // Render the diagram
+        const { svg } = await mermaid.render(id, code);
+        setSvgContent(svg);
+        setError(null);
+      } catch (err) {
+        console.error('Mermaid rendering error:', err);
+        setError(
+          `Failed to render Mermaid diagram: ${err instanceof Error ? err.message : String(err)}`,
+        );
+        setSvgContent('');
+      }
+    };
+
+    renderDiagram();
+  }, [code, isDarkTheme, status]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        downloadMenuRef.current &&
+        !downloadMenuRef.current.contains(event.target as Node)
+      ) {
+        setShowDownloadMenu(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showDownloadMenu]);
+
+  // Function to download as SVG
+  const downloadSvg = (): void => {
+    if (!svgContent) return;
+
+    // Add XML declaration and ensure proper namespaces
+    let enhancedSvg = svgContent;
+    if (!enhancedSvg.includes('xmlns=')) {
+      enhancedSvg = enhancedSvg.replace(
+        '<svg',
+        '<svg xmlns="http://www.w3.org/2000/svg"',
+      );
+    }
+
+    // Add explicit width and height if missing
+    const parser = new DOMParser();
+    const svgDoc = parser.parseFromString(enhancedSvg, 'image/svg+xml');
+    const svgElement = svgDoc.documentElement;
+
+    if (
+      !svgElement.hasAttribute('width') &&
+      svgElement.hasAttribute('viewBox')
+    ) {
+      const viewBox = svgElement.getAttribute('viewBox')?.split(' ') || [];
+      if (viewBox.length === 4) {
+        svgElement.setAttribute('width', viewBox[2]);
+        svgElement.setAttribute('height', viewBox[3]);
+      }
+    }
+
+    const serializer = new XMLSerializer();
+    const finalSvgString = serializer.serializeToString(svgDoc);
+
+    const blob = new Blob([finalSvgString], { type: 'image/svg+xml' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'diagram.svg';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  // Function to download as PNG
+  const downloadPng = (): void => {
+    if (!svgContent) return;
+
+    // Parse the SVG
+    const parser = new DOMParser();
+    const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml');
+    const svgElement = svgDoc.documentElement;
+
+    // Ensure SVG has dimensions
+    let width = parseInt(svgElement.getAttribute('width') || '0');
+    let height = parseInt(svgElement.getAttribute('height') || '0');
+
+    // If dimensions are missing, try to get from viewBox
+    if (!width || !height) {
+      const viewBox = svgElement.getAttribute('viewBox')?.split(' ') || [];
+      if (viewBox.length === 4) {
+        width = parseInt(viewBox[2]);
+        height = parseInt(viewBox[3]);
+        svgElement.setAttribute('width', width.toString());
+        svgElement.setAttribute('height', height.toString());
+      } else {
+        width = 800;
+        height = 600;
+        svgElement.setAttribute('width', width.toString());
+        svgElement.setAttribute('height', height.toString());
+      }
+    }
+
+    const serializer = new XMLSerializer();
+    const svgString = serializer.serializeToString(svgDoc);
+
+    // Create an Image object
+    const img = new Image();
+
+    img.onload = function (): void {
+      // Create a canvas with proper dimensions
+      const canvas = document.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        console.error('Could not get canvas context');
+        return;
+      }
+
+      // Fill with white background
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      // Draw the image
+      ctx.drawImage(img, 0, 0, width, height);
+
+      // Convert to PNG and download
+      const pngUrl = canvas.toDataURL('image/png');
+      const link = document.createElement('a');
+      link.download = 'diagram.png';
+      link.href = pngUrl;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    };
+
+    // Set the image source to the SVG
+    const svgBlob = new Blob([svgString], { type: 'image/svg+xml' });
+    const url = URL.createObjectURL(svgBlob);
+    img.src = url;
+  };
+
+  const downloadMmd = (): void => {
+    const blob = new Blob([code], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'diagram.mmd';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  const downloadOptions = [
+    { label: 'Download as SVG', action: downloadSvg },
+    { label: 'Download as PNG', action: downloadPng },
+    { label: 'Download as MMD', action: downloadMmd },
+  ];
+
+  const showDiagramOptions = status !== 'loading' && !error;
+  const errorRender = status !== 'loading' && error;
+
+  return (
+    <div className="group relative rounded-lg overflow-hidden border border-light-silver dark:border-raisin-black">
+      <div className="flex justify-between items-center px-2 py-1 bg-platinum dark:bg-eerie-black-2">
+        <span className="text-xs font-medium text-just-black dark:text-chinese-white">
+          mermaid
+        </span>
+        <div className="flex items-center gap-2">
+          <CopyButton text={String(code).replace(/\n$/, '')} />
+
+          {showDiagramOptions && (
+            <div className="relative" ref={downloadMenuRef}>
+              <button
+                onClick={() => setShowDownloadMenu(!showDownloadMenu)}
+                className="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded flex items-center h-full"
+                title="Download options"
+              >
+                Download <span className="ml-1">▼</span>
+              </button>
+              {showDownloadMenu && (
+                <div className="absolute right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded shadow-lg z-10 w-40">
+                  <ul>
+                    {downloadOptions.map((option, index) => (
+                      <li key={index}>
+                        <button
+                          onClick={() => {
+                            option.action();
+                            setShowDownloadMenu(false);
+                          }}
+                          className="text-xs px-4 py-2 w-full text-left hover:bg-gray-100 dark:hover:bg-gray-700"
+                        >
+                          {option.label}
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+          )}
+
+          {showDiagramOptions && (
+            <button
+              onClick={() => setShowCode(!showCode)}
+              className={`text-xs px-2 py-1 rounded flex items-center h-full ${
+                showCode
+                  ? 'bg-blue-200 dark:bg-blue-800'
+                  : 'bg-gray-100 dark:bg-gray-700'
+              }`}
+              title="View Code"
+            >
+              Code
+            </button>
+          )}
+        </div>
+      </div>
+
+      {status === 'loading' ? (
+        <div className="p-4 bg-white dark:bg-eerie-black flex justify-center items-center">
+          <div className="text-sm text-gray-500 dark:text-gray-400">
+            Loading diagram...
+          </div>
+        </div>
+      ) : errorRender ? (
+        <div className="border-2 border-red-400 dark:border-red-700 rounded m-2">
+          <div className="bg-red-100 dark:bg-red-900/30 px-4 py-2 text-red-800 dark:text-red-300 text-sm whitespace-normal break-words overflow-auto">
+            {error}
+          </div>
+          {/* <pre className="p-4 whitespace-pre-wrap overflow-auto bg-white dark:bg-eerie-black text-just-black dark:text-chinese-white">
+            {code}
+          </pre> */}
+        </div>
+      ) : (
+        <div className="flex flex-col md:flex-row">
+          {/* Show the diagram */}
+          <div
+            ref={containerRef}
+            className={`p-4 bg-white dark:bg-eerie-black flex justify-center items-center ${
+              showCode ? 'md:w-1/2' : 'w-full'
+            }`}
+            dangerouslySetInnerHTML={{ __html: svgContent }}
+          />
+
+          {/* Show the code when button is clicked */}
+          {showCode && (
+            <pre className="p-4 whitespace-pre-wrap overflow-auto bg-white dark:bg-eerie-black text-just-black dark:text-chinese-white border-t md:border-t-0 md:border-l border-light-silver dark:border-raisin-black md:w-1/2">
+              {code}
+            </pre>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MermaidRenderer;
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index ec244087..0b7498d2 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -36,6 +36,7 @@ import {
 import classes from './ConversationBubble.module.css';
 import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
 import { ToolCallsType } from './types';
+import MermaidRenderer from '../components/MermaidRenderer';
 
 const DisableSourceFE = import.meta.env.VITE_DISABLE_SOURCE_FE || false;
 
@@ -101,26 +102,25 @@ const ConversationBubble = forwardRef<
   let bubble;
   const renderAttachments = () => {
     if (!attachments || attachments.length === 0) return null;
-    
     return (
       <div className="mt-2 flex flex-wrap gap-2">
         {attachments.map((attachment, index) => (
-          <div 
-            key={index} 
+          <div
+            key={index}
             className="flex items-center rounded-md bg-gray-100 px-2 py-1 text-sm dark:bg-gray-700"
           >
-            <svg 
-              className="mr-1 h-4 w-4" 
-              fill="none" 
-              stroke="currentColor" 
-              viewBox="0 0 24 24" 
+            <svg
+              className="mr-1 h-4 w-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <path 
-                strokeLinecap="round" 
-                strokeLinejoin="round" 
-                strokeWidth={2} 
-                d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" 
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
               />
             </svg>
             <span>{attachment.fileName}</span>
@@ -792,6 +792,15 @@ function Thought({
                   const match = /language-(\w+)/.exec(className || '');
                   const language = match ? match[1] : '';
 
+                  if (language === 'mermaid') {
+                    return (
+                      <MermaidRenderer
+                        isDarkTheme={isDarkTheme}
+                        code={String(children)}
+                      />
+                    );
+                  }
+
                   return match ? (
                     <div className="group relative rounded-[14px] overflow-hidden border border-light-silver dark:border-raisin-black">
                       <div className="flex justify-between items-center px-2 py-1 bg-platinum dark:bg-eerie-black-2">

From b1235f3ce0812b842d27413597e67ddc9bd11a50 Mon Sep 17 00:00:00 2001
From: asminkarki012 <asminkarki09@gmail.com>
Date: Fri, 4 Apr 2025 18:40:57 +0545
Subject: [PATCH 02/26] feat[mermaid]:clean comment

---
 frontend/src/components/MermaidRenderer.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
index 569dfdc2..d3fda1d4 100644
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -267,9 +267,6 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
           <div className="bg-red-100 dark:bg-red-900/30 px-4 py-2 text-red-800 dark:text-red-300 text-sm whitespace-normal break-words overflow-auto">
             {error}
           </div>
-          {/* <pre className="p-4 whitespace-pre-wrap overflow-auto bg-white dark:bg-eerie-black text-just-black dark:text-chinese-white">
-            {code}
-          </pre> */}
         </div>
       ) : (
         <div className="flex flex-col md:flex-row">

From c5a8f3abcdee1ec45f83e72b37cef8103f87a436 Mon Sep 17 00:00:00 2001
From: asminkarki012 <asminkarki09@gmail.com>
Date: Fri, 11 Apr 2025 11:48:07 +0545
Subject: [PATCH 03/26] refact:generate unique meraid id using
 crypto.randomUUID

---
 frontend/src/components/MermaidRenderer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
index d3fda1d4..23b69155 100644
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -32,7 +32,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
     const renderDiagram = async (): Promise<void> => {
       try {
         // Generate unique ID
-        const id = `mermaid-${Math.random().toString(36).substring(2, 9)}`;
+        const id = `mermaid-${crypto.randomUUID()}`;
 
         // Render the diagram
         const { svg } = await mermaid.render(id, code);

From ea0aa64330669abd67bca01fb53c66ca93eda5a8 Mon Sep 17 00:00:00 2001
From: asminkarki012 <asminkarki09@gmail.com>
Date: Mon, 21 Apr 2025 20:50:04 +0545
Subject: [PATCH 04/26] fix: added renderer in answer bubble

---
 frontend/src/components/MermaidRenderer.tsx    |  6 +-----
 frontend/src/components/types/index.ts         |  5 +++++
 .../src/conversation/ConversationBubble.tsx    | 18 +++++++++---------
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
index 23b69155..c32b253b 100644
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -3,11 +3,7 @@ import mermaid from 'mermaid';
 import CopyButton from './CopyButton';
 import { useSelector } from 'react-redux';
 import { selectStatus } from '../conversation/conversationSlice';
-
-interface MermaidRendererProps {
-  code: string;
-  isDarkTheme: boolean;
-}
+import { MermaidRendererProps } from './types';
 
 const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   code,
diff --git a/frontend/src/components/types/index.ts b/frontend/src/components/types/index.ts
index 47fcd86f..4e6870c4 100644
--- a/frontend/src/components/types/index.ts
+++ b/frontend/src/components/types/index.ts
@@ -22,3 +22,8 @@ export type InputProps = {
     e: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>,
   ) => void;
 };
+
+export type MermaidRendererProps = {
+  code: string;
+  isDarkTheme: boolean;
+};
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 0b7498d2..c92cf870 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -403,6 +403,15 @@ const ConversationBubble = forwardRef<
                     const match = /language-(\w+)/.exec(className || '');
                     const language = match ? match[1] : '';
 
+                    if (language === 'mermaid') {
+                      return (
+                        <MermaidRenderer
+                          isDarkTheme={isDarkTheme}
+                          code={String(children)}
+                        />
+                      );
+                    }
+
                     return match ? (
                       <div className="group relative rounded-[14px] overflow-hidden border border-light-silver dark:border-raisin-black">
                         <div className="flex justify-between items-center px-2 py-1 bg-platinum dark:bg-eerie-black-2">
@@ -792,15 +801,6 @@ function Thought({
                   const match = /language-(\w+)/.exec(className || '');
                   const language = match ? match[1] : '';
 
-                  if (language === 'mermaid') {
-                    return (
-                      <MermaidRenderer
-                        isDarkTheme={isDarkTheme}
-                        code={String(children)}
-                      />
-                    );
-                  }
-
                   return match ? (
                     <div className="group relative rounded-[14px] overflow-hidden border border-light-silver dark:border-raisin-black">
                       <div className="flex justify-between items-center px-2 py-1 bg-platinum dark:bg-eerie-black-2">

From fc0060662b4b67b83ca7424d78ceea544cdc4a35 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Fri, 25 Apr 2025 21:18:49 +0530
Subject: [PATCH 05/26] (fix:mermaid) suppress mermaid injected errors in DOM

---
 frontend/src/components/MermaidRenderer.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
index c32b253b..e4f97b19 100644
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -24,6 +24,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
       startOnLoad: false,
       theme: isDarkTheme ? 'dark' : 'default',
       securityLevel: 'loose',
+      suppressErrorRendering: true
     });
     const renderDiagram = async (): Promise<void> => {
       try {
@@ -32,10 +33,12 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
 
         // Render the diagram
         const { svg } = await mermaid.render(id, code);
+        if (containerRef.current) {
+          containerRef.current.innerHTML = svg;
+        }
         setSvgContent(svg);
         setError(null);
       } catch (err) {
-        console.error('Mermaid rendering error:', err);
         setError(
           `Failed to render Mermaid diagram: ${err instanceof Error ? err.message : String(err)}`,
         );
@@ -272,7 +275,6 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
             className={`p-4 bg-white dark:bg-eerie-black flex justify-center items-center ${
               showCode ? 'md:w-1/2' : 'w-full'
             }`}
-            dangerouslySetInnerHTML={{ __html: svgContent }}
           />
 
           {/* Show the code when button is clicked */}

From 545376740cb40b1ca4f68d94b71c3463252c248e Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Sat, 26 Apr 2025 19:33:24 +0530
Subject: [PATCH 06/26] (fix:re-render) useRef to check for bottom

---
 frontend/src/conversation/ConversationMessages.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/conversation/ConversationMessages.tsx b/frontend/src/conversation/ConversationMessages.tsx
index d1a9a24e..941b9682 100644
--- a/frontend/src/conversation/ConversationMessages.tsx
+++ b/frontend/src/conversation/ConversationMessages.tsx
@@ -38,9 +38,9 @@ export default function ConversationMessages({
   const { t } = useTranslation();
 
   const conversationRef = useRef<HTMLDivElement>(null);
-  const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
+  const atLast = useRef(true);
   const [eventInterrupt, setEventInterrupt] = useState(false);
-
+  
   const handleUserInterruption = () => {
     if (!eventInterrupt && status === 'loading') {
       setEventInterrupt(true);
@@ -64,7 +64,8 @@ export default function ConversationMessages({
     const el = conversationRef.current;
     if (!el) return;
     const isBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 10;
-    setHasScrolledToLast(isBottom);
+
+    atLast.current = isBottom
   };
 
   useEffect(() => {
@@ -145,7 +146,7 @@ export default function ConversationMessages({
       onTouchMove={handleUserInterruption}
       className="flex justify-center w-full overflow-y-auto h-full sm:pt-12"
     >
-      {queries.length > 0 && !hasScrolledToLast && (
+      {queries.length > 0 && !atLast.current && (
         <button
           onClick={scrollIntoView}
           aria-label="scroll to bottom"
@@ -181,4 +182,4 @@ export default function ConversationMessages({
       </div>
     </div>
   );
-}
+}
\ No newline at end of file

From 545353dabf9e9b255af86b4f40854e4c3ffd2d5e Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Sun, 27 Apr 2025 03:42:28 +0530
Subject: [PATCH 07/26] (feat:mermaid) use contentLoaded to render

---
 frontend/src/components/MermaidRenderer.tsx | 44 +++++++++++----------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
index e4f97b19..eefe2e83 100644
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -9,7 +9,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   code,
   isDarkTheme,
 }) => {
-  const containerRef = useRef<HTMLDivElement>(null);
+  const diagramId = useRef(`mermaid-${crypto.randomUUID()}`);
   const status = useSelector(selectStatus);
   const [svgContent, setSvgContent] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
@@ -19,28 +19,31 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
 
   useEffect(() => {
     if (status === 'loading' || !code) return;
-    // Initialize mermaid with the current theme
+
     mermaid.initialize({
-      startOnLoad: false,
+      startOnLoad: true,
       theme: isDarkTheme ? 'dark' : 'default',
       securityLevel: 'loose',
       suppressErrorRendering: true
     });
+
     const renderDiagram = async (): Promise<void> => {
       try {
-        // Generate unique ID
-        const id = `mermaid-${crypto.randomUUID()}`;
-
-        // Render the diagram
-        const { svg } = await mermaid.render(id, code);
-        if (containerRef.current) {
-          containerRef.current.innerHTML = svg;
+        const element = document.getElementById(diagramId.current);
+        if (element) {
+          element.removeAttribute('data-processed');
+          element.innerHTML = code;
+          mermaid.contentLoaded();
+          
+          const svgElement = element.querySelector('svg');
+          if (svgElement) {
+            setSvgContent(svgElement.outerHTML);
+          }
+          setError(null);
         }
-        setSvgContent(svg);
-        setError(null);
       } catch (err) {
         setError(
-          `Failed to render Mermaid diagram: ${err instanceof Error ? err.message : String(err)}`,
+          `Failed to render Mermaid diagram: ${err instanceof Error ? err.message : String(err)}`
         );
         setSvgContent('');
       }
@@ -269,15 +272,14 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
         </div>
       ) : (
         <div className="flex flex-col md:flex-row">
-          {/* Show the diagram */}
-          <div
-            ref={containerRef}
-            className={`p-4 bg-white dark:bg-eerie-black flex justify-center items-center ${
-              showCode ? 'md:w-1/2' : 'w-full'
-            }`}
-          />
+          <div className={`p-4 bg-white dark:bg-eerie-black flex justify-center items-center ${
+            showCode ? 'md:w-1/2' : 'w-full'
+          }`}>
+            <div className="mermaid" id={diagramId.current}>
+              {code}
+            </div>
+          </div>
 
-          {/* Show the code when button is clicked */}
           {showCode && (
             <pre className="p-4 whitespace-pre-wrap overflow-auto bg-white dark:bg-eerie-black text-just-black dark:text-chinese-white border-t md:border-t-0 md:border-l border-light-silver dark:border-raisin-black md:w-1/2">
               {code}

From 7e28e562d09cb89636495136baa24f8e775cf30d Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 1 May 2025 19:37:03 +0530
Subject: [PATCH 08/26] (fix:mermaid) download svg/png

---
 frontend/src/components/MermaidRenderer.tsx | 151 ++++++++++----------
 1 file changed, 74 insertions(+), 77 deletions(-)

diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
index eefe2e83..bd1e5b03 100644
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -68,40 +68,35 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
     };
   }, [showDownloadMenu]);
 
-  // Function to download as SVG
   const downloadSvg = (): void => {
-    if (!svgContent) return;
-
-    // Add XML declaration and ensure proper namespaces
-    let enhancedSvg = svgContent;
-    if (!enhancedSvg.includes('xmlns=')) {
-      enhancedSvg = enhancedSvg.replace(
-        '<svg',
-        '<svg xmlns="http://www.w3.org/2000/svg"',
-      );
+    const element = document.getElementById(diagramId.current);
+    if (!element) return;
+    const svgElement = element.querySelector('svg');
+    if (!svgElement) return;
+    
+    const svgClone = svgElement.cloneNode(true) as SVGElement;
+    
+    if (!svgClone.hasAttribute('xmlns')) {
+      svgClone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
     }
-
-    // Add explicit width and height if missing
-    const parser = new DOMParser();
-    const svgDoc = parser.parseFromString(enhancedSvg, 'image/svg+xml');
-    const svgElement = svgDoc.documentElement;
-
-    if (
-      !svgElement.hasAttribute('width') &&
-      svgElement.hasAttribute('viewBox')
-    ) {
-      const viewBox = svgElement.getAttribute('viewBox')?.split(' ') || [];
+    
+    if (!svgClone.hasAttribute('width') || !svgClone.hasAttribute('height')) {
+      const viewBox = svgClone.getAttribute('viewBox')?.split(' ') || [];
       if (viewBox.length === 4) {
-        svgElement.setAttribute('width', viewBox[2]);
-        svgElement.setAttribute('height', viewBox[3]);
+        svgClone.setAttribute('width', viewBox[2]);
+        svgClone.setAttribute('height', viewBox[3]);
       }
     }
-
+    
     const serializer = new XMLSerializer();
-    const finalSvgString = serializer.serializeToString(svgDoc);
-
-    const blob = new Blob([finalSvgString], { type: 'image/svg+xml' });
-    const url = URL.createObjectURL(blob);
+    const svgString = serializer.serializeToString(svgClone);
+    
+    const svgBlob = new Blob(
+      [`<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n${svgString}`], 
+      { type: 'image/svg+xml' }
+    );
+    
+    const url = URL.createObjectURL(svgBlob);
     const link = document.createElement('a');
     link.href = url;
     link.download = 'diagram.svg';
@@ -111,74 +106,76 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
     URL.revokeObjectURL(url);
   };
 
-  // Function to download as PNG
   const downloadPng = (): void => {
-    if (!svgContent) return;
-
-    // Parse the SVG
-    const parser = new DOMParser();
-    const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml');
-    const svgElement = svgDoc.documentElement;
-
-    // Ensure SVG has dimensions
-    let width = parseInt(svgElement.getAttribute('width') || '0');
-    let height = parseInt(svgElement.getAttribute('height') || '0');
-
-    // If dimensions are missing, try to get from viewBox
+    const element = document.getElementById(diagramId.current);
+    if (!element) return;
+    
+    const svgElement = element.querySelector('svg');
+    if (!svgElement) return;
+    
+    const svgClone = svgElement.cloneNode(true) as SVGElement;
+    
+    if (!svgClone.hasAttribute('xmlns')) {
+      svgClone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    }
+    
+    let width = parseInt(svgClone.getAttribute('width') || '0');
+    let height = parseInt(svgClone.getAttribute('height') || '0');
+    
     if (!width || !height) {
-      const viewBox = svgElement.getAttribute('viewBox')?.split(' ') || [];
+      const viewBox = svgClone.getAttribute('viewBox')?.split(' ') || [];
       if (viewBox.length === 4) {
         width = parseInt(viewBox[2]);
         height = parseInt(viewBox[3]);
-        svgElement.setAttribute('width', width.toString());
-        svgElement.setAttribute('height', height.toString());
+        svgClone.setAttribute('width', width.toString());
+        svgClone.setAttribute('height', height.toString());
       } else {
         width = 800;
         height = 600;
-        svgElement.setAttribute('width', width.toString());
-        svgElement.setAttribute('height', height.toString());
+        svgClone.setAttribute('width', width.toString());
+        svgClone.setAttribute('height', height.toString());
       }
     }
-
+    
     const serializer = new XMLSerializer();
-    const svgString = serializer.serializeToString(svgDoc);
-
-    // Create an Image object
+    const svgString = serializer.serializeToString(svgClone);
+    const svgBase64 = btoa(unescape(encodeURIComponent(svgString)));
+    const dataUrl = `data:image/svg+xml;base64,${svgBase64}`;
+    
     const img = new Image();
-
-    img.onload = function (): void {
-      // Create a canvas with proper dimensions
+    img.crossOrigin = 'anonymous';
+    
+    img.onload = function(): void {
       const canvas = document.createElement('canvas');
       canvas.width = width;
       canvas.height = height;
-
+      
       const ctx = canvas.getContext('2d');
       if (!ctx) {
         console.error('Could not get canvas context');
         return;
       }
-
-      // Fill with white background
-      ctx.fillStyle = '#ffffff';
+      
       ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-      // Draw the image
+      
       ctx.drawImage(img, 0, 0, width, height);
-
-      // Convert to PNG and download
-      const pngUrl = canvas.toDataURL('image/png');
-      const link = document.createElement('a');
-      link.download = 'diagram.png';
-      link.href = pngUrl;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
+      
+      try {
+        const pngUrl = canvas.toDataURL('image/png');
+        const link = document.createElement('a');
+        link.download = 'diagram.png';
+        link.href = pngUrl;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      } catch (e) {
+        console.error('Failed to create PNG:', e);
+        // Fallback to SVG download if PNG fails
+        downloadSvg();
+      }
     };
-
-    // Set the image source to the SVG
-    const svgBlob = new Blob([svgString], { type: 'image/svg+xml' });
-    const url = URL.createObjectURL(svgBlob);
-    img.src = url;
+    
+    img.src = dataUrl;
   };
 
   const downloadMmd = (): void => {
@@ -210,7 +207,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
         </span>
         <div className="flex items-center gap-2">
           <CopyButton text={String(code).replace(/\n$/, '')} />
-
+  
           {showDiagramOptions && (
             <div className="relative" ref={downloadMenuRef}>
               <button
@@ -241,7 +238,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
               )}
             </div>
           )}
-
+  
           {showDiagramOptions && (
             <button
               onClick={() => setShowCode(!showCode)}
@@ -257,7 +254,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
           )}
         </div>
       </div>
-
+  
       {status === 'loading' ? (
         <div className="p-4 bg-white dark:bg-eerie-black flex justify-center items-center">
           <div className="text-sm text-gray-500 dark:text-gray-400">
@@ -279,7 +276,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
               {code}
             </div>
           </div>
-
+  
           {showCode && (
             <pre className="p-4 whitespace-pre-wrap overflow-auto bg-white dark:bg-eerie-black text-just-black dark:text-chinese-white border-t md:border-t-0 md:border-l border-light-silver dark:border-raisin-black md:w-1/2">
               {code}

From 7e7ce276b28e3b4e0293382e878be390265ee4a7 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Fri, 2 May 2025 14:12:24 +0530
Subject: [PATCH 09/26] (fix:mermaid/flicker) separated from  markdown

---
 .../src/conversation/ConversationBubble.tsx   | 242 ++++++++++--------
 1 file changed, 140 insertions(+), 102 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 75cf2633..0a0d0780 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -1,6 +1,6 @@
 import 'katex/dist/katex.min.css';
 
-import { forwardRef, useRef, useState } from 'react';
+import { forwardRef, Fragment, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import { useSelector } from 'react-redux';
@@ -193,6 +193,33 @@ const ConversationBubble = forwardRef<
 
       return inlineProcessedContent;
     };
+    const processMarkdownContent = (content: string) => {
+      const processedContent = preprocessLaTeX(content);
+      
+      const contentSegments: Array<{type: 'text' | 'mermaid', content: string}> = [];
+      
+      let lastIndex = 0;
+      const regex = /```mermaid\n([\s\S]*?)```/g;
+      let match;
+      
+      while ((match = regex.exec(processedContent)) !== null) {
+        const textBefore = processedContent.substring(lastIndex, match.index);
+        if (textBefore) {
+          contentSegments.push({ type: 'text', content: textBefore });
+        }
+        
+        contentSegments.push({ type: 'mermaid', content: match[1].trim() });
+        
+        lastIndex = match.index + match[0].length;
+      }
+      
+      const textAfter = processedContent.substring(lastIndex);
+      if (textAfter) {
+        contentSegments.push({ type: 'text', content: textAfter });
+      }
+      
+      return contentSegments;
+    };
     bubble = (
       <div
         ref={ref}
@@ -361,107 +388,118 @@ const ConversationBubble = forwardRef<
                   : 'flex-col rounded-3xl'
               }`}
             >
-              <ReactMarkdown
-                className="fade-in whitespace-pre-wrap break-words leading-normal"
-                remarkPlugins={[remarkGfm, remarkMath]}
-                rehypePlugins={[rehypeKatex]}
-                components={{
-                  code(props) {
-                    const { children, className, node, ref, ...rest } = props;
-                    const match = /language-(\w+)/.exec(className || '');
-                    const language = match ? match[1] : '';
-
-                    if (language === 'mermaid') {
-                      return (
-                        <MermaidRenderer
-                          isDarkTheme={isDarkTheme}
-                          code={String(children)}
-                        />
-                      );
-                    }
-
-                    return match ? (
-                      <div className="group relative rounded-[14px] overflow-hidden border border-light-silver dark:border-raisin-black">
-                        <div className="flex justify-between items-center px-2 py-1 bg-platinum dark:bg-eerie-black-2">
-                          <span className="text-xs font-medium text-just-black dark:text-chinese-white">
-                            {language}
-                          </span>
-                          <CopyButton
-                            text={String(children).replace(/\n$/, '')}
-                          />
-                        </div>
-                        <SyntaxHighlighter
-                          {...rest}
-                          PreTag="div"
-                          language={language}
-                          style={isDarkTheme ? vscDarkPlus : oneLight}
-                          className="!mt-0"
-                          customStyle={{
-                            margin: 0,
-                            borderRadius: 0,
-                            scrollbarWidth: 'thin',
-                          }}
-                        >
-                          {String(children).replace(/\n$/, '')}
-                        </SyntaxHighlighter>
-                      </div>
-                    ) : (
-                      <code className="whitespace-pre-line rounded-[6px] bg-gray-200 px-[8px] py-[4px] text-xs font-normal dark:bg-independence dark:text-bright-gray">
-                        {children}
-                      </code>
-                    );
-                  },
-                  ul({ children }) {
-                    return (
-                      <ul
-                        className={`list-inside list-disc whitespace-normal pl-4 ${classes.list}`}
-                      >
-                        {children}
-                      </ul>
-                    );
-                  },
-                  ol({ children }) {
-                    return (
-                      <ol
-                        className={`list-inside list-decimal whitespace-normal pl-4 ${classes.list}`}
-                      >
-                        {children}
-                      </ol>
-                    );
-                  },
-                  table({ children }) {
-                    return (
-                      <div className="relative overflow-x-auto rounded-lg border border-silver/40 dark:border-silver/40">
-                        <table className="w-full text-left text-gray-700 dark:text-bright-gray">
-                          {children}
-                        </table>
-                      </div>
-                    );
-                  },
-                  thead({ children }) {
-                    return (
-                      <thead className="text-xs uppercase text-gray-900 dark:text-bright-gray bg-gray-50 dark:bg-[#26272E]/50">
-                        {children}
-                      </thead>
-                    );
-                  },
-                  tr({ children }) {
-                    return (
-                      <tr className="border-b border-gray-200 dark:border-silver/40 odd:bg-white dark:odd:bg-[#26272E] even:bg-gray-50 dark:even:bg-[#26272E]/50">
-                        {children}
-                      </tr>
-                    );
-                  },
-                  th({ children }) {
-                    return <th className="px-6 py-3">{children}</th>;
-                  },
-                  td({ children }) {
-                    return <td className="px-6 py-3">{children}</td>;
-                  },
-                }}
-              >
-                {preprocessLaTeX(message)}
-              </ReactMarkdown>
+              {(() => {
+                const contentSegments = processMarkdownContent(message);
+                return (
+                  <>
+                    {contentSegments.map((segment, index) => (
+                      <Fragment key={index}>
+                        {segment.type === 'text' ? (
+                          <ReactMarkdown
+                            className="fade-in whitespace-pre-wrap break-words leading-normal"
+                            remarkPlugins={[remarkGfm, remarkMath]}
+                            rehypePlugins={[rehypeKatex]}
+                            components={{
+                              code(props) {
+                                const { children, className, node, ref, ...rest } = props;
+                                const match = /language-(\w+)/.exec(className || '');
+                                const language = match ? match[1] : '';
+                                
+                                return match ? (
+                                  <div className="group relative rounded-[14px] overflow-hidden border border-light-silver dark:border-raisin-black">
+                                    <div className="flex justify-between items-center px-2 py-1 bg-platinum dark:bg-eerie-black-2">
+                                      <span className="text-xs font-medium text-just-black dark:text-chinese-white">
+                                        {language}
+                                      </span>
+                                      <CopyButton
+                                        text={String(children).replace(/\n$/, '')}
+                                      />
+                                    </div>
+                                    <SyntaxHighlighter
+                                      {...rest}
+                                      PreTag="div"
+                                      language={language}
+                                      style={isDarkTheme ? vscDarkPlus : oneLight}
+                                      className="!mt-0"
+                                      customStyle={{
+                                        margin: 0,
+                                        borderRadius: 0,
+                                        scrollbarWidth: 'thin',
+                                      }}
+                                    >
+                                      {String(children).replace(/\n$/, '')}
+                                    </SyntaxHighlighter>
+                                  </div>
+                                ) : (
+                                  <code className="whitespace-pre-line rounded-[6px] bg-gray-200 px-[8px] py-[4px] text-xs font-normal dark:bg-independence dark:text-bright-gray">
+                                    {children}
+                                  </code>
+                                );
+                              },
+                              ul({ children }) {
+                                return (
+                                  <ul
+                                    className={`list-inside list-disc whitespace-normal pl-4 ${classes.list}`}
+                                  >
+                                    {children}
+                                  </ul>
+                                );
+                              },
+                              ol({ children }) {
+                                return (
+                                  <ol
+                                    className={`list-inside list-decimal whitespace-normal pl-4 ${classes.list}`}
+                                  >
+                                    {children}
+                                  </ol>
+                                );
+                              },
+                              table({ children }) {
+                                return (
+                                  <div className="relative overflow-x-auto rounded-lg border border-silver/40 dark:border-silver/40">
+                                    <table className="w-full text-left text-gray-700 dark:text-bright-gray">
+                                      {children}
+                                    </table>
+                                  </div>
+                                );
+                              },
+                              thead({ children }) {
+                                return (
+                                  <thead className="text-xs uppercase text-gray-900 dark:text-bright-gray bg-gray-50 dark:bg-[#26272E]/50">
+                                    {children}
+                                  </thead>
+                                );
+                              },
+                              tr({ children }) {
+                                return (
+                                  <tr className="border-b border-gray-200 dark:border-silver/40 odd:bg-white dark:odd:bg-[#26272E] even:bg-gray-50 dark:even:bg-[#26272E]/50">
+                                    {children}
+                                  </tr>
+                                );
+                              },
+                              th({ children }) {
+                                return <th className="px-6 py-3">{children}</th>;
+                              },
+                              td({ children }) {
+                                return <td className="px-6 py-3">{children}</td>;
+                              },
+                            }}
+                          >
+                            {segment.content}
+                          </ReactMarkdown>
+                        ) : (
+                          <div className="my-4 w-full" style={{ minWidth: '100%' }}>
+                            <MermaidRenderer
+                              isDarkTheme={isDarkTheme}
+                              code={segment.content}
+                            />
+                          </div>
+                        )}
+                      </Fragment>
+                    ))}
+                  </>
+                );
+              })()}
             </div>
           </div>
         )}

From 16386a952413e6dc97fe93af47f91ce027dc7274 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Sun, 4 May 2025 19:39:24 +0530
Subject: [PATCH 10/26] (feat:mermaid) zoom on hover

---
 frontend/src/components/MermaidRenderer.tsx   | 187 +++++++++++++-----
 .../src/conversation/ConversationMessages.tsx |  29 +--
 2 files changed, 152 insertions(+), 64 deletions(-)

diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
index bd1e5b03..d2ca1276 100644
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
 import mermaid from 'mermaid';
 import CopyButton from './CopyButton';
-import { useSelector } from 'react-redux';
-import { selectStatus } from '../conversation/conversationSlice';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneLight, vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { MermaidRendererProps } from './types';
 
 const MermaidRenderer: React.FC<MermaidRendererProps> = ({
@@ -10,47 +10,90 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   isDarkTheme,
 }) => {
   const diagramId = useRef(`mermaid-${crypto.randomUUID()}`);
-  const status = useSelector(selectStatus);
+  // const status = useSelector(selectStatus);
+  const [localStatus, setLocalStatus] = useState<'loading' | 'idle'>('loading');
   const [svgContent, setSvgContent] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
   const [showCode, setShowCode] = useState<boolean>(false);
   const [showDownloadMenu, setShowDownloadMenu] = useState<boolean>(false);
+  const [zoomLevel, setZoomLevel] = useState<number>(1);
   const downloadMenuRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [hoverPosition, setHoverPosition] = useState<{ x: number, y: number } | null>(null);
+  const [isHovering, setIsHovering] = useState<boolean>(false);
+  
+  const handleMouseMove = (event: React.MouseEvent) => {
+    if (!containerRef.current) return;
+    
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = (event.clientX - rect.left) / rect.width;
+    const y = (event.clientY - rect.top) / rect.height;
+    
+    setHoverPosition({ x, y });
+  };
+  
+  const handleMouseEnter = () => setIsHovering(true);
+  const handleMouseLeave = () => {
+    setIsHovering(false);
+    setHoverPosition(null);
+  };
+  
+  const getTransformOrigin = () => {
+    if (!hoverPosition) return 'center center';
+    return `${hoverPosition.x * 100}% ${hoverPosition.y * 100}%`;
+  };
+  useEffect(() => {
+    if (!code) {
+      setLocalStatus('idle');
+      return;
+    }
+      setLocalStatus('loading');
+      
+      mermaid.initialize({
+        startOnLoad: true,
+        theme: isDarkTheme ? 'dark' : 'default',
+        securityLevel: 'loose',
+        suppressErrorRendering: true,
+      });
+      
+      const renderDiagram = async (): Promise<void> => {
+        try {
+          const element = document.getElementById(diagramId.current);
+          if (element) {
+            element.removeAttribute('data-processed');
+            element.innerHTML = code;
+            mermaid.contentLoaded();
+            
+            const svgElement = element.querySelector('svg');
+            if (svgElement) {
+              svgElement.setAttribute('width', '100%');
+              svgElement.setAttribute('height', 'auto');
+              svgElement.style.maxWidth = '100%';
+              svgElement.style.width = '100%';
+              
+              svgElement.removeAttribute('viewBox');
+              
+              setSvgContent(svgElement.outerHTML);
+            }
+            setError(null);
+            setLocalStatus('idle');
+          }
+        } catch (err) {
+          setError(
+            `Failed to render Mermaid diagram: ${err instanceof Error ? err.message : String(err)}`
+          );
+          setSvgContent('');
+          setLocalStatus('idle');
+        }
+      };
+      
+      renderDiagram();
+  
+  }, [code, isDarkTheme]);
 
   useEffect(() => {
-    if (status === 'loading' || !code) return;
-
-    mermaid.initialize({
-      startOnLoad: true,
-      theme: isDarkTheme ? 'dark' : 'default',
-      securityLevel: 'loose',
-      suppressErrorRendering: true
-    });
-
-    const renderDiagram = async (): Promise<void> => {
-      try {
-        const element = document.getElementById(diagramId.current);
-        if (element) {
-          element.removeAttribute('data-processed');
-          element.innerHTML = code;
-          mermaid.contentLoaded();
-          
-          const svgElement = element.querySelector('svg');
-          if (svgElement) {
-            setSvgContent(svgElement.outerHTML);
-          }
-          setError(null);
-        }
-      } catch (err) {
-        setError(
-          `Failed to render Mermaid diagram: ${err instanceof Error ? err.message : String(err)}`
-        );
-        setSvgContent('');
-      }
-    };
-
-    renderDiagram();
-  }, [code, isDarkTheme, status]);
+    setZoomLevel(1);
+  }, [code]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -68,6 +111,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
     };
   }, [showDownloadMenu]);
 
+
   const downloadSvg = (): void => {
     const element = document.getElementById(diagramId.current);
     if (!element) return;
@@ -189,25 +233,26 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
     document.body.removeChild(link);
     URL.revokeObjectURL(url);
   };
-
+  
+ 
   const downloadOptions = [
     { label: 'Download as SVG', action: downloadSvg },
     { label: 'Download as PNG', action: downloadPng },
     { label: 'Download as MMD', action: downloadMmd },
   ];
 
-  const showDiagramOptions = status !== 'loading' && !error;
-  const errorRender = status !== 'loading' && error;
+  const showDiagramOptions = localStatus !== 'loading' && !error;
+  const errorRender = localStatus !== 'loading' && error;
 
   return (
-    <div className="group relative rounded-lg overflow-hidden border border-light-silver dark:border-raisin-black">
+    <div className="group relative rounded-lg border border-light-silver dark:border-raisin-black w-full">
       <div className="flex justify-between items-center px-2 py-1 bg-platinum dark:bg-eerie-black-2">
         <span className="text-xs font-medium text-just-black dark:text-chinese-white">
           mermaid
         </span>
         <div className="flex items-center gap-2">
           <CopyButton text={String(code).replace(/\n$/, '')} />
-  
+          
           {showDiagramOptions && (
             <div className="relative" ref={downloadMenuRef}>
               <button
@@ -255,34 +300,72 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
         </div>
       </div>
   
-      {status === 'loading' ? (
+      {localStatus === 'loading' ? (
         <div className="p-4 bg-white dark:bg-eerie-black flex justify-center items-center">
           <div className="text-sm text-gray-500 dark:text-gray-400">
             Loading diagram...
           </div>
         </div>
-      ) : errorRender ? (
+      ) :  errorRender ? (
         <div className="border-2 border-red-400 dark:border-red-700 rounded m-2">
           <div className="bg-red-100 dark:bg-red-900/30 px-4 py-2 text-red-800 dark:text-red-300 text-sm whitespace-normal break-words overflow-auto">
             {error}
           </div>
         </div>
       ) : (
-        <div className="flex flex-col md:flex-row">
-          <div className={`p-4 bg-white dark:bg-eerie-black flex justify-center items-center ${
-            showCode ? 'md:w-1/2' : 'w-full'
-          }`}>
-            <div className="mermaid" id={diagramId.current}>
+        <>
+          <div 
+            ref={containerRef}
+            className="no-scrollbar p-4 bg-white dark:bg-eerie-black flex justify-center items-center w-full"
+            style={{ 
+              overflow: 'auto',
+              scrollbarWidth: 'none',
+              msOverflowStyle: 'none',
+              width: '100%'
+            }}
+            onMouseMove={handleMouseMove}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <div 
+              className="mermaid select-none w-full" 
+              id={diagramId.current}
+              style={{ 
+                transform: isHovering ? `scale(${2})` : `scale(1)`,
+                transformOrigin: getTransformOrigin(),
+                transition: 'transform 0.2s ease',
+                cursor: 'default',
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center'
+              }}
+            >
               {code}
             </div>
           </div>
   
           {showCode && (
-            <pre className="p-4 whitespace-pre-wrap overflow-auto bg-white dark:bg-eerie-black text-just-black dark:text-chinese-white border-t md:border-t-0 md:border-l border-light-silver dark:border-raisin-black md:w-1/2">
-              {code}
-            </pre>
+            <div className="border-t border-light-silver dark:border-raisin-black">
+              <div className="p-2 bg-platinum dark:bg-eerie-black-2">
+                <span className="text-xs font-medium text-just-black dark:text-chinese-white">
+                  Mermaid Code
+                </span>
+              </div>
+              <SyntaxHighlighter
+                language="mermaid"
+                style={isDarkTheme ? vscDarkPlus : oneLight}
+                customStyle={{
+                  margin: 0,
+                  borderRadius: 0,
+                  scrollbarWidth: 'thin',
+                  maxHeight: '300px'
+                }}
+              >
+                {code}
+              </SyntaxHighlighter>
+            </div>
           )}
-        </div>
+        </>
       )}
     </div>
   );
diff --git a/frontend/src/conversation/ConversationMessages.tsx b/frontend/src/conversation/ConversationMessages.tsx
index 941b9682..50c79394 100644
--- a/frontend/src/conversation/ConversationMessages.tsx
+++ b/frontend/src/conversation/ConversationMessages.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import ArrowDown from '../assets/arrow-down.svg';
@@ -47,25 +47,30 @@ export default function ConversationMessages({
     }
   };
 
+  // Remove Mermaid tracking code that was here
+
   const scrollIntoView = () => {
     if (!conversationRef?.current || eventInterrupt) return;
 
-    if (status === 'idle' || !queries[queries.length - 1]?.response) {
-      conversationRef.current.scrollTo({
-        behavior: 'smooth',
-        top: conversationRef.current.scrollHeight,
-      });
-    } else {
-      conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
-    }
+    setTimeout(() => {
+      if (!conversationRef?.current) return;
+      
+      if (status === 'idle' || !queries[queries.length - 1]?.response) {
+        conversationRef.current.scrollTo({
+          behavior: 'smooth',
+          top: conversationRef.current.scrollHeight,
+        });
+      } else {
+        conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
+      }
+    }, 100); // Small timeout to allow images to render
   };
 
   const checkScroll = () => {
     const el = conversationRef.current;
     if (!el) return;
     const isBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 10;
-
-    atLast.current = isBottom
+    atLast.current = isBottom;
   };
 
   useEffect(() => {
@@ -182,4 +187,4 @@ export default function ConversationMessages({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}

From 98856b39acefb26f28f8b855707a638204426e9a Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 6 May 2025 00:53:33 +0530
Subject: [PATCH 11/26] (feat:mermaid) zoom onhover, throw syntax errors

---
 frontend/src/components/MermaidRenderer.tsx | 46 +++++++++------------
 1 file changed, 20 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
index d2ca1276..ef3e9222 100644
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -4,19 +4,18 @@ import CopyButton from './CopyButton';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneLight, vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { MermaidRendererProps } from './types';
+import { useSelector } from 'react-redux';
+import { selectStatus } from '../conversation/conversationSlice';
 
 const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   code,
   isDarkTheme,
 }) => {
   const diagramId = useRef(`mermaid-${crypto.randomUUID()}`);
-  // const status = useSelector(selectStatus);
-  const [localStatus, setLocalStatus] = useState<'loading' | 'idle'>('loading');
-  const [svgContent, setSvgContent] = useState<string>('');
+  const status = useSelector(selectStatus);
   const [error, setError] = useState<string | null>(null);
   const [showCode, setShowCode] = useState<boolean>(false);
   const [showDownloadMenu, setShowDownloadMenu] = useState<boolean>(false);
-  const [zoomLevel, setZoomLevel] = useState<number>(1);
   const downloadMenuRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [hoverPosition, setHoverPosition] = useState<{ x: number, y: number } | null>(null);
@@ -43,11 +42,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
     return `${hoverPosition.x * 100}% ${hoverPosition.y * 100}%`;
   };
   useEffect(() => {
-    if (!code) {
-      setLocalStatus('idle');
-      return;
-    }
-      setLocalStatus('loading');
+    if (status === 'loading' || !code) return;
       
       mermaid.initialize({
         startOnLoad: true,
@@ -58,10 +53,11 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
       
       const renderDiagram = async (): Promise<void> => {
         try {
+          await mermaid.parse(code); //throws syntax errors
+          
           const element = document.getElementById(diagramId.current);
           if (element) {
             element.removeAttribute('data-processed');
-            element.innerHTML = code;
             mermaid.contentLoaded();
             
             const svgElement = element.querySelector('svg');
@@ -73,27 +69,22 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
               
               svgElement.removeAttribute('viewBox');
               
-              setSvgContent(svgElement.outerHTML);
             }
             setError(null);
-            setLocalStatus('idle');
           }
         } catch (err) {
+          
           setError(
             `Failed to render Mermaid diagram: ${err instanceof Error ? err.message : String(err)}`
           );
-          setSvgContent('');
-          setLocalStatus('idle');
         }
       };
       
       renderDiagram();
+      
   
   }, [code, isDarkTheme]);
 
-  useEffect(() => {
-    setZoomLevel(1);
-  }, [code]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -241,11 +232,13 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
     { label: 'Download as MMD', action: downloadMmd },
   ];
 
-  const showDiagramOptions = localStatus !== 'loading' && !error;
-  const errorRender = localStatus !== 'loading' && error;
+  const showDiagramOptions = status !== 'loading' && !error;
+  const errorRender = status !== 'loading' && error;
+
+
 
   return (
-    <div className="group relative rounded-lg border border-light-silver dark:border-raisin-black w-full">
+    <div className="group relative rounded-lg border border-light-silver dark:border-raisin-black bg-white dark:bg-eerie-black  w-inherit">
       <div className="flex justify-between items-center px-2 py-1 bg-platinum dark:bg-eerie-black-2">
         <span className="text-xs font-medium text-just-black dark:text-chinese-white">
           mermaid
@@ -300,7 +293,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
         </div>
       </div>
   
-      {localStatus === 'loading' ? (
+      {status === 'loading' ? (
         <div className="p-4 bg-white dark:bg-eerie-black flex justify-center items-center">
           <div className="text-sm text-gray-500 dark:text-gray-400">
             Loading diagram...
@@ -316,22 +309,23 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
         <>
           <div 
             ref={containerRef}
-            className="no-scrollbar p-4 bg-white dark:bg-eerie-black flex justify-center items-center w-full"
+            className=" no-scrollbar p-4 block w-full bg-white dark:bg-eerie-black "
             style={{ 
               overflow: 'auto',
               scrollbarWidth: 'none',
               msOverflowStyle: 'none',
-              width: '100%'
+              width: '100%',
+              
             }}
             onMouseMove={handleMouseMove}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
           >
-            <div 
+            <pre 
               className="mermaid select-none w-full" 
               id={diagramId.current}
               style={{ 
-                transform: isHovering ? `scale(${2})` : `scale(1)`,
+                transform: isHovering ? `scale(2)` : `scale(1)`,
                 transformOrigin: getTransformOrigin(),
                 transition: 'transform 0.2s ease',
                 cursor: 'default',
@@ -341,7 +335,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
               }}
             >
               {code}
-            </div>
+            </pre>
           </div>
   
           {showCode && (

From 72e51bb072a0a9daac915f7daf7d27f6ef3f2a2a Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 6 May 2025 04:38:38 +0530
Subject: [PATCH 12/26] (feat:mermaid) dont pass isDarkTheme

---
 frontend/src/components/MermaidRenderer.tsx      | 3 ++-
 frontend/src/components/types/index.ts           | 1 -
 frontend/src/conversation/ConversationBubble.tsx | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
index ef3e9222..ac37cfb4 100644
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -6,11 +6,12 @@ import { oneLight, vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/
 import { MermaidRendererProps } from './types';
 import { useSelector } from 'react-redux';
 import { selectStatus } from '../conversation/conversationSlice';
+import { useDarkTheme } from '../hooks';
 
 const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   code,
-  isDarkTheme,
 }) => {
+  const [isDarkTheme] = useDarkTheme();
   const diagramId = useRef(`mermaid-${crypto.randomUUID()}`);
   const status = useSelector(selectStatus);
   const [error, setError] = useState<string | null>(null);
diff --git a/frontend/src/components/types/index.ts b/frontend/src/components/types/index.ts
index 7f8834bb..25dae251 100644
--- a/frontend/src/components/types/index.ts
+++ b/frontend/src/components/types/index.ts
@@ -26,5 +26,4 @@ export type InputProps = {
 
 export type MermaidRendererProps = {
   code: string;
-  isDarkTheme: boolean;
 };
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 0a0d0780..67cc1c34 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -490,7 +490,6 @@ const ConversationBubble = forwardRef<
                         ) : (
                           <div className="my-4 w-full" style={{ minWidth: '100%' }}>
                             <MermaidRenderer
-                              isDarkTheme={isDarkTheme}
                               code={segment.content}
                             />
                           </div>

From f37ca95c1012d5918c2e36840877b3ad1415fae2 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 6 May 2025 15:16:14 +0530
Subject: [PATCH 13/26] (fix/mermaid loading): load only the diagrams which
 stream

---
 frontend/src/components/MermaidRenderer.tsx   | 106 +++++++++---------
 frontend/src/components/types/index.ts        |   1 +
 .../src/conversation/ConversationBubble.tsx   |  25 +++--
 .../src/conversation/ConversationMessages.tsx |   6 +-
 4 files changed, 73 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
index ac37cfb4..b9014581 100644
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -10,6 +10,7 @@ import { useDarkTheme } from '../hooks';
 
 const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   code,
+  isLoading,
 }) => {
   const [isDarkTheme] = useDarkTheme();
   const diagramId = useRef(`mermaid-${crypto.randomUUID()}`);
@@ -21,70 +22,70 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const [hoverPosition, setHoverPosition] = useState<{ x: number, y: number } | null>(null);
   const [isHovering, setIsHovering] = useState<boolean>(false);
-  
+
   const handleMouseMove = (event: React.MouseEvent) => {
     if (!containerRef.current) return;
-    
+
     const rect = containerRef.current.getBoundingClientRect();
     const x = (event.clientX - rect.left) / rect.width;
     const y = (event.clientY - rect.top) / rect.height;
-    
+
     setHoverPosition({ x, y });
   };
-  
+
   const handleMouseEnter = () => setIsHovering(true);
   const handleMouseLeave = () => {
     setIsHovering(false);
     setHoverPosition(null);
   };
-  
+
   const getTransformOrigin = () => {
     if (!hoverPosition) return 'center center';
     return `${hoverPosition.x * 100}% ${hoverPosition.y * 100}%`;
   };
   useEffect(() => {
-    if (status === 'loading' || !code) return;
-      
+    if ((isLoading !== undefined ? isLoading : status === 'loading') || !code) return;
+
       mermaid.initialize({
         startOnLoad: true,
         theme: isDarkTheme ? 'dark' : 'default',
         securityLevel: 'loose',
         suppressErrorRendering: true,
       });
-      
+
       const renderDiagram = async (): Promise<void> => {
         try {
           await mermaid.parse(code); //throws syntax errors
-          
+
           const element = document.getElementById(diagramId.current);
           if (element) {
             element.removeAttribute('data-processed');
             mermaid.contentLoaded();
-            
+
             const svgElement = element.querySelector('svg');
             if (svgElement) {
               svgElement.setAttribute('width', '100%');
               svgElement.setAttribute('height', 'auto');
               svgElement.style.maxWidth = '100%';
               svgElement.style.width = '100%';
-              
+
               svgElement.removeAttribute('viewBox');
-              
+
             }
             setError(null);
           }
         } catch (err) {
-          
+
           setError(
             `Failed to render Mermaid diagram: ${err instanceof Error ? err.message : String(err)}`
           );
         }
       };
-      
+
       renderDiagram();
-      
-  
-  }, [code, isDarkTheme]);
+
+
+  }, [code, isDarkTheme, isLoading]);
 
 
   useEffect(() => {
@@ -109,13 +110,13 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
     if (!element) return;
     const svgElement = element.querySelector('svg');
     if (!svgElement) return;
-    
+
     const svgClone = svgElement.cloneNode(true) as SVGElement;
-    
+
     if (!svgClone.hasAttribute('xmlns')) {
       svgClone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
     }
-    
+
     if (!svgClone.hasAttribute('width') || !svgClone.hasAttribute('height')) {
       const viewBox = svgClone.getAttribute('viewBox')?.split(' ') || [];
       if (viewBox.length === 4) {
@@ -123,15 +124,15 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
         svgClone.setAttribute('height', viewBox[3]);
       }
     }
-    
+
     const serializer = new XMLSerializer();
     const svgString = serializer.serializeToString(svgClone);
-    
+
     const svgBlob = new Blob(
-      [`<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n${svgString}`], 
+      [`<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n${svgString}`],
       { type: 'image/svg+xml' }
     );
-    
+
     const url = URL.createObjectURL(svgBlob);
     const link = document.createElement('a');
     link.href = url;
@@ -145,19 +146,19 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   const downloadPng = (): void => {
     const element = document.getElementById(diagramId.current);
     if (!element) return;
-    
+
     const svgElement = element.querySelector('svg');
     if (!svgElement) return;
-    
+
     const svgClone = svgElement.cloneNode(true) as SVGElement;
-    
+
     if (!svgClone.hasAttribute('xmlns')) {
       svgClone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
     }
-    
+
     let width = parseInt(svgClone.getAttribute('width') || '0');
     let height = parseInt(svgClone.getAttribute('height') || '0');
-    
+
     if (!width || !height) {
       const viewBox = svgClone.getAttribute('viewBox')?.split(' ') || [];
       if (viewBox.length === 4) {
@@ -172,30 +173,30 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
         svgClone.setAttribute('height', height.toString());
       }
     }
-    
+
     const serializer = new XMLSerializer();
     const svgString = serializer.serializeToString(svgClone);
     const svgBase64 = btoa(unescape(encodeURIComponent(svgString)));
     const dataUrl = `data:image/svg+xml;base64,${svgBase64}`;
-    
+
     const img = new Image();
     img.crossOrigin = 'anonymous';
-    
+
     img.onload = function(): void {
       const canvas = document.createElement('canvas');
       canvas.width = width;
       canvas.height = height;
-      
+
       const ctx = canvas.getContext('2d');
       if (!ctx) {
         console.error('Could not get canvas context');
         return;
       }
-      
+
       ctx.fillRect(0, 0, canvas.width, canvas.height);
-      
+
       ctx.drawImage(img, 0, 0, width, height);
-      
+
       try {
         const pngUrl = canvas.toDataURL('image/png');
         const link = document.createElement('a');
@@ -210,7 +211,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
         downloadSvg();
       }
     };
-    
+
     img.src = dataUrl;
   };
 
@@ -225,16 +226,17 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
     document.body.removeChild(link);
     URL.revokeObjectURL(url);
   };
-  
- 
+
+
   const downloadOptions = [
     { label: 'Download as SVG', action: downloadSvg },
     { label: 'Download as PNG', action: downloadPng },
     { label: 'Download as MMD', action: downloadMmd },
   ];
 
-  const showDiagramOptions = status !== 'loading' && !error;
-  const errorRender = status !== 'loading' && error;
+  const isCurrentlyLoading = isLoading !== undefined ? isLoading : status === 'loading';
+  const showDiagramOptions = !isCurrentlyLoading && !error;
+  const errorRender = !isCurrentlyLoading && error;
 
 
 
@@ -246,7 +248,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
         </span>
         <div className="flex items-center gap-2">
           <CopyButton text={String(code).replace(/\n$/, '')} />
-          
+
           {showDiagramOptions && (
             <div className="relative" ref={downloadMenuRef}>
               <button
@@ -277,7 +279,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
               )}
             </div>
           )}
-  
+
           {showDiagramOptions && (
             <button
               onClick={() => setShowCode(!showCode)}
@@ -293,8 +295,8 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
           )}
         </div>
       </div>
-  
-      {status === 'loading' ? (
+
+      {isCurrentlyLoading ? (
         <div className="p-4 bg-white dark:bg-eerie-black flex justify-center items-center">
           <div className="text-sm text-gray-500 dark:text-gray-400">
             Loading diagram...
@@ -308,24 +310,24 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
         </div>
       ) : (
         <>
-          <div 
+          <div
             ref={containerRef}
             className=" no-scrollbar p-4 block w-full bg-white dark:bg-eerie-black "
-            style={{ 
+            style={{
               overflow: 'auto',
               scrollbarWidth: 'none',
               msOverflowStyle: 'none',
               width: '100%',
-              
+
             }}
             onMouseMove={handleMouseMove}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
           >
-            <pre 
-              className="mermaid select-none w-full" 
+            <pre
+              className="mermaid select-none w-full"
               id={diagramId.current}
-              style={{ 
+              style={{
                 transform: isHovering ? `scale(2)` : `scale(1)`,
                 transformOrigin: getTransformOrigin(),
                 transition: 'transform 0.2s ease',
@@ -338,7 +340,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
               {code}
             </pre>
           </div>
-  
+
           {showCode && (
             <div className="border-t border-light-silver dark:border-raisin-black">
               <div className="p-2 bg-platinum dark:bg-eerie-black-2">
diff --git a/frontend/src/components/types/index.ts b/frontend/src/components/types/index.ts
index 25dae251..1c0d138d 100644
--- a/frontend/src/components/types/index.ts
+++ b/frontend/src/components/types/index.ts
@@ -26,4 +26,5 @@ export type InputProps = {
 
 export type MermaidRendererProps = {
   code: string;
+  isLoading?: boolean;
 };
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 67cc1c34..5e3b83c1 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -53,6 +53,7 @@ const ConversationBubble = forwardRef<
     toolCalls?: ToolCallsType[];
     retryBtn?: React.ReactElement;
     questionNumber?: number;
+    isStreaming?: boolean;
     handleUpdatedQuestionSubmission?: (
       updatedquestion?: string,
       updated?: boolean,
@@ -71,6 +72,7 @@ const ConversationBubble = forwardRef<
     toolCalls,
     retryBtn,
     questionNumber,
+    isStreaming,
     handleUpdatedQuestionSubmission,
   },
   ref,
@@ -195,29 +197,29 @@ const ConversationBubble = forwardRef<
     };
     const processMarkdownContent = (content: string) => {
       const processedContent = preprocessLaTeX(content);
-      
+
       const contentSegments: Array<{type: 'text' | 'mermaid', content: string}> = [];
-      
+
       let lastIndex = 0;
       const regex = /```mermaid\n([\s\S]*?)```/g;
       let match;
-      
+
       while ((match = regex.exec(processedContent)) !== null) {
         const textBefore = processedContent.substring(lastIndex, match.index);
         if (textBefore) {
           contentSegments.push({ type: 'text', content: textBefore });
         }
-        
+
         contentSegments.push({ type: 'mermaid', content: match[1].trim() });
-        
+
         lastIndex = match.index + match[0].length;
       }
-      
+
       const textAfter = processedContent.substring(lastIndex);
       if (textAfter) {
         contentSegments.push({ type: 'text', content: textAfter });
       }
-      
+
       return contentSegments;
     };
     bubble = (
@@ -404,7 +406,7 @@ const ConversationBubble = forwardRef<
                                 const { children, className, node, ref, ...rest } = props;
                                 const match = /language-(\w+)/.exec(className || '');
                                 const language = match ? match[1] : '';
-                                
+
                                 return match ? (
                                   <div className="group relative rounded-[14px] overflow-hidden border border-light-silver dark:border-raisin-black">
                                     <div className="flex justify-between items-center px-2 py-1 bg-platinum dark:bg-eerie-black-2">
@@ -491,6 +493,7 @@ const ConversationBubble = forwardRef<
                           <div className="my-4 w-full" style={{ minWidth: '100%' }}>
                             <MermaidRenderer
                               code={segment.content}
+                              isLoading={isStreaming}
                             />
                           </div>
                         )}
@@ -505,7 +508,7 @@ const ConversationBubble = forwardRef<
         {message && (
           <div className="my-2 ml-2 flex justify-start">
             <div
-              className={`relative mr-2  block items-center justify-center lg:invisible 
+              className={`relative mr-2  block items-center justify-center lg:invisible
             ${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
             >
               <div>
@@ -513,7 +516,7 @@ const ConversationBubble = forwardRef<
               </div>
             </div>
             <div
-              className={`relative mr-2 block items-center justify-center lg:invisible 
+              className={`relative mr-2 block items-center justify-center lg:invisible
             ${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
             >
               <div>
@@ -544,7 +547,7 @@ const ConversationBubble = forwardRef<
                       }`}
                     >
                       <Like
-                        className={`cursor-pointer 
+                        className={`cursor-pointer
                   ${
                     isLikeClicked || feedback === 'LIKE'
                       ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
diff --git a/frontend/src/conversation/ConversationMessages.tsx b/frontend/src/conversation/ConversationMessages.tsx
index 50c79394..0839b88f 100644
--- a/frontend/src/conversation/ConversationMessages.tsx
+++ b/frontend/src/conversation/ConversationMessages.tsx
@@ -40,7 +40,7 @@ export default function ConversationMessages({
   const conversationRef = useRef<HTMLDivElement>(null);
   const atLast = useRef(true);
   const [eventInterrupt, setEventInterrupt] = useState(false);
-  
+
   const handleUserInterruption = () => {
     if (!eventInterrupt && status === 'loading') {
       setEventInterrupt(true);
@@ -54,7 +54,7 @@ export default function ConversationMessages({
 
     setTimeout(() => {
       if (!conversationRef?.current) return;
-      
+
       if (status === 'idle' || !queries[queries.length - 1]?.response) {
         conversationRef.current.scrollTo({
           behavior: 'smooth',
@@ -93,6 +93,7 @@ export default function ConversationMessages({
   const prepResponseView = (query: Query, index: number) => {
     let responseView;
     if (query.thought || query.response) {
+      const isCurrentlyStreaming = status === 'loading' && index === queries.length - 1;
       responseView = (
         <ConversationBubble
           className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
@@ -103,6 +104,7 @@ export default function ConversationMessages({
           sources={query.sources}
           toolCalls={query.tool_calls}
           feedback={query.feedback}
+          isStreaming={isCurrentlyStreaming}
           handleFeedback={
             handleFeedback
               ? (feedback) => handleFeedback(query, feedback, index)

From e56d54c3f0236c4c327e481b481ca44816729198 Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Tue, 6 May 2025 10:59:25 +0100
Subject: [PATCH 14/26] fix: improve source and description handling in
 GetAgent and GetAgents responses

---
 application/api/user/routes.py | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index 3b3cb21f..bacc8bb7 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -997,12 +997,8 @@ class GetAgent(Resource):
             data = {
                 "id": str(agent["_id"]),
                 "name": agent["name"],
-                "description": agent["description"],
-                "source": (
-                    str(db.dereference(agent["source"])["_id"])
-                    if "source" in agent and isinstance(agent["source"], DBRef)
-                    else ""
-                ),
+                "description": agent.get("description", ""),
+                "source": (str(source_doc["_id"]) if isinstance(agent.get("source"), DBRef) and (source_doc := db.dereference(agent.get("source"))) else ""),
                 "chunks": agent["chunks"],
                 "retriever": agent.get("retriever", ""),
                 "prompt_id": agent["prompt_id"],
@@ -1035,12 +1031,8 @@ class GetAgents(Resource):
                 {
                     "id": str(agent["_id"]),
                     "name": agent["name"],
-                    "description": agent["description"],
-                    "source": (
-                        str(db.dereference(agent["source"])["_id"])
-                        if "source" in agent and isinstance(agent["source"], DBRef)
-                        else ""
-                    ),
+                    "description": agent.get("description", ""),
+                    "source": (str(source_doc["_id"]) if isinstance(agent.get("source"), DBRef) and (source_doc := db.dereference(agent.get("source"))) else ""),
                     "chunks": agent["chunks"],
                     "retriever": agent.get("retriever", ""),
                     "prompt_id": agent["prompt_id"],

From 7858c48f11fee4865c641200e67425916069cdd5 Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Tue, 6 May 2025 11:12:26 +0100
Subject: [PATCH 15/26] fix: zip file uploads

---
 application/api/user/routes.py | 111 ++++++++++++++++++++-------------
 1 file changed, 66 insertions(+), 45 deletions(-)

diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index bacc8bb7..e10082d3 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -439,59 +439,80 @@ class UploadFile(Resource):
 
                 zip_filename = f"{job_name}.zip"
                 zip_path = f"{base_path}/{zip_filename}"
+                zip_temp_path = None
 
-                def create_zip_archive(temp_paths, **kwargs):
+                def create_zip_archive(temp_paths, job_name, storage):
                     import tempfile
 
-                    with tempfile.TemporaryDirectory() as temp_dir:
+                    with tempfile.NamedTemporaryFile(delete=False, suffix=".zip") as temp_zip_file:
+                        zip_output_path = temp_zip_file.name
+
+                    with tempfile.TemporaryDirectory() as stage_dir:
                         for path in temp_paths:
-                            file_data = storage.get_file(path)
-                            with open(
-                                os.path.join(temp_dir, os.path.basename(path)), "wb"
-                            ) as f:
-                                f.write(file_data.read())
+                            try:
+                                file_data = storage.get_file(path)
+                                with open(os.path.join(stage_dir, os.path.basename(path)), "wb") as f:
+                                    f.write(file_data.read())
+                            except Exception as e:
+                                current_app.logger.error(f"Error processing file {path} for zipping: {e}", exc_info=True)
+                                if os.path.exists(zip_output_path):
+                                    os.remove(zip_output_path)
+                                raise
+                        try:
+                            shutil.make_archive(
+                                base_name=zip_output_path.replace(".zip", ""),
+                                format="zip",
+                                root_dir=stage_dir,
+                            )
+                        except Exception as e:
+                            current_app.logger.error(f"Error creating zip archive: {e}", exc_info=True)
+                            if os.path.exists(zip_output_path):
+                                os.remove(zip_output_path)
+                            raise
 
-                        # Create zip archive
-                        zip_temp = shutil.make_archive(
-                            base_name=os.path.join(temp_dir, job_name),
-                            format="zip",
-                            root_dir=temp_dir,
-                        )
+                    return zip_output_path
 
-                        return zip_temp
+                try:
+                    zip_temp_path = create_zip_archive(temp_files, job_name, storage)
+                    with open(zip_temp_path, "rb") as zip_file:
+                        storage.save_file(zip_file, zip_path)
 
-                zip_temp_path = create_zip_archive(temp_files)
-                with open(zip_temp_path, "rb") as zip_file:
-                    storage.save_file(zip_file, zip_path)
+                    task = ingest.delay(
+                        settings.UPLOAD_FOLDER,
+                        [
+                            ".rst",
+                            ".md",
+                            ".pdf",
+                            ".txt",
+                            ".docx",
+                            ".csv",
+                            ".epub",
+                            ".html",
+                            ".mdx",
+                            ".json",
+                            ".xlsx",
+                            ".pptx",
+                            ".png",
+                            ".jpg",
+                            ".jpeg",
+                        ],
+                        job_name,
+                        zip_filename,
+                        user,
+                    )
+                finally:
+                    # Clean up temporary files
+                    for temp_path in temp_files:
+                        try:
+                            storage.delete_file(temp_path)
+                        except Exception as e:
+                            current_app.logger.error(f"Error deleting temporary file {temp_path}: {e}", exc_info=True)
 
-                # Clean up temp files
-                for temp_path in temp_files:
-                    storage.delete_file(temp_path)
+                    # Clean up the zip file if it was created
+                    if zip_temp_path and os.path.exists(zip_temp_path):
+                        os.remove(zip_temp_path)
 
-                task = ingest.delay(
-                    settings.UPLOAD_FOLDER,
-                    [
-                        ".rst",
-                        ".md",
-                        ".pdf",
-                        ".txt",
-                        ".docx",
-                        ".csv",
-                        ".epub",
-                        ".html",
-                        ".mdx",
-                        ".json",
-                        ".xlsx",
-                        ".pptx",
-                        ".png",
-                        ".jpg",
-                        ".jpeg",
-                    ],
-                    job_name,
-                    zip_filename,
-                    user,
-                )
-            else:
+            else: # Keep this else block for single file upload
                 # For single file
                 file = files[0]
                 filename = secure_filename(file.filename)
@@ -519,7 +540,7 @@ class UploadFile(Resource):
                         ".jpeg",
                     ],
                     job_name,
-                    filename,
+                    filename, # Corrected variable for single-file case
                     user,
                 )
 

From 23f648f53a54409dee54d2fb4152427f3bddf26f Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 7 May 2025 02:07:57 +0530
Subject: [PATCH 16/26] (feat/mermaid) zoom as per the requirement

---
 frontend/src/components/MermaidRenderer.tsx | 110 ++++++++++++++------
 1 file changed, 79 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
index b9014581..11285bc5 100644
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -22,6 +22,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const [hoverPosition, setHoverPosition] = useState<{ x: number, y: number } | null>(null);
   const [isHovering, setIsHovering] = useState<boolean>(false);
+  const [zoomFactor, setZoomFactor] = useState<number>(2); 
 
   const handleMouseMove = (event: React.MouseEvent) => {
     if (!containerRef.current) return;
@@ -39,55 +40,70 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
     setHoverPosition(null);
   };
 
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (!isHovering) return;
+
+    if (event.key === '+' || event.key === '=') {
+      setZoomFactor(prev => Math.min(6, prev + 0.5)); // Cap at 6x
+      event.preventDefault();
+    }
+    else if (event.key === '-') {
+      setZoomFactor(prev => Math.max(1, prev - 0.5)); // Minimum 1x
+      event.preventDefault();
+    }
+  };
+
+  const handleWheel = (event: React.WheelEvent) => {
+    if (!isHovering) return;
+
+    if ( event.ctrlKey || event.metaKey) {
+      event.preventDefault();
+
+      if (event.deltaY < 0) {
+        setZoomFactor(prev => Math.min(6, prev + 0.25));
+      } else {
+        setZoomFactor(prev => Math.max(1, prev - 0.25));
+      }
+    }
+  };
+
   const getTransformOrigin = () => {
     if (!hoverPosition) return 'center center';
     return `${hoverPosition.x * 100}% ${hoverPosition.y * 100}%`;
   };
-  useEffect(() => {
-    if ((isLoading !== undefined ? isLoading : status === 'loading') || !code) return;
 
+  useEffect(() => {
+    const renderDiagram = async () => {
       mermaid.initialize({
         startOnLoad: true,
         theme: isDarkTheme ? 'dark' : 'default',
         securityLevel: 'loose',
         suppressErrorRendering: true,
       });
-
-      const renderDiagram = async (): Promise<void> => {
+  
+      const isCurrentlyLoading = isLoading !== undefined ? isLoading : status === 'loading';
+      if (!isCurrentlyLoading && code) {
         try {
-          await mermaid.parse(code); //throws syntax errors
-
           const element = document.getElementById(diagramId.current);
           if (element) {
             element.removeAttribute('data-processed');
+            await mermaid.parse(code); //syntax check
             mermaid.contentLoaded();
-
-            const svgElement = element.querySelector('svg');
-            if (svgElement) {
-              svgElement.setAttribute('width', '100%');
-              svgElement.setAttribute('height', 'auto');
-              svgElement.style.maxWidth = '100%';
-              svgElement.style.width = '100%';
-
-              svgElement.removeAttribute('viewBox');
-
-            }
-            setError(null);
           }
         } catch (err) {
-
-          setError(
-            `Failed to render Mermaid diagram: ${err instanceof Error ? err.message : String(err)}`
-          );
+          console.error('Error rendering mermaid diagram:', err);
+          setError(`Failed to render diagram: ${err instanceof Error ? err.message : String(err)}`);
         }
-      };
-
-      renderDiagram();
-
+      }
+    };
 
+    renderDiagram();
   }, [code, isDarkTheme, isLoading]);
 
 
+ 
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -238,8 +254,6 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   const showDiagramOptions = !isCurrentlyLoading && !error;
   const errorRender = !isCurrentlyLoading && error;
 
-
-
   return (
     <div className="group relative rounded-lg border border-light-silver dark:border-raisin-black bg-white dark:bg-eerie-black  w-inherit">
       <div className="flex justify-between items-center px-2 py-1 bg-platinum dark:bg-eerie-black-2">
@@ -302,7 +316,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
             Loading diagram...
           </div>
         </div>
-      ) :  errorRender ? (
+      ) : errorRender ? (
         <div className="border-2 border-red-400 dark:border-red-700 rounded m-2">
           <div className="bg-red-100 dark:bg-red-900/30 px-4 py-2 text-red-800 dark:text-red-300 text-sm whitespace-normal break-words overflow-auto">
             {error}
@@ -312,7 +326,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
         <>
           <div
             ref={containerRef}
-            className=" no-scrollbar p-4 block w-full bg-white dark:bg-eerie-black "
+            className=" no-scrollbar p-4 block w-full bg-white dark:bg-eerie-black relative"
             style={{
               overflow: 'auto',
               scrollbarWidth: 'none',
@@ -323,12 +337,46 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
             onMouseMove={handleMouseMove}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
+            onKeyDown={handleKeyDown}
+            onWheel={handleWheel}
+            tabIndex={0}
+            
           >
+            {isHovering && (
+              <>
+              <div className="absolute top-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded z-10 flex items-center gap-2">
+                <button
+                  onClick={() => setZoomFactor(prev => Math.max(1, prev - 0.5))}
+                  className="hover:bg-gray-600 px-1 rounded"
+                  title="Decrease zoom"
+                >
+                  -
+                </button>
+                <span
+                  className="cursor-pointer hover:underline"
+                  onClick={() => {
+                    setZoomFactor(2);
+                  }}
+                  title="Reset zoom"
+                >
+                  {zoomFactor.toFixed(1)}x
+                </span>
+                <button
+                  onClick={() => setZoomFactor(prev => Math.min(6, prev + 0.5))}
+                  className="hover:bg-gray-600 px-1 rounded"
+                  title="Increase zoom"
+                >
+                  +
+                </button>
+              </div>
+              </>
+            )}
             <pre
               className="mermaid select-none w-full"
               id={diagramId.current}
+              key={`mermaid-${diagramId.current}`}
               style={{
-                transform: isHovering ? `scale(2)` : `scale(1)`,
+                transform: isHovering ? `scale(${zoomFactor})` : `scale(1)`,
                 transformOrigin: getTransformOrigin(),
                 transition: 'transform 0.2s ease',
                 cursor: 'default',

From 09e054c6aa4db7eb136fbd3bcf7aa8c52a56ad14 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 7 May 2025 02:48:49 +0530
Subject: [PATCH 17/26] (fix/scroll) bring back arrowDown button, smoother
 scroll

---
 .../src/conversation/ConversationMessages.tsx     | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend/src/conversation/ConversationMessages.tsx b/frontend/src/conversation/ConversationMessages.tsx
index 0839b88f..52162658 100644
--- a/frontend/src/conversation/ConversationMessages.tsx
+++ b/frontend/src/conversation/ConversationMessages.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState, useCallback } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import ArrowDown from '../assets/arrow-down.svg';
@@ -38,7 +38,7 @@ export default function ConversationMessages({
   const { t } = useTranslation();
 
   const conversationRef = useRef<HTMLDivElement>(null);
-  const atLast = useRef(true);
+  const [atLast,setAtLast] = useState(true);
   const [eventInterrupt, setEventInterrupt] = useState(false);
 
   const handleUserInterruption = () => {
@@ -47,12 +47,11 @@ export default function ConversationMessages({
     }
   };
 
-  // Remove Mermaid tracking code that was here
 
   const scrollIntoView = () => {
     if (!conversationRef?.current || eventInterrupt) return;
 
-    setTimeout(() => {
+    requestAnimationFrame(() => {
       if (!conversationRef?.current) return;
 
       if (status === 'idle' || !queries[queries.length - 1]?.response) {
@@ -63,14 +62,14 @@ export default function ConversationMessages({
       } else {
         conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
       }
-    }, 100); // Small timeout to allow images to render
+    });
   };
 
   const checkScroll = () => {
     const el = conversationRef.current;
     if (!el) return;
     const isBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 10;
-    atLast.current = isBottom;
+    setAtLast(isBottom);
   };
 
   useEffect(() => {
@@ -151,9 +150,9 @@ export default function ConversationMessages({
       ref={conversationRef}
       onWheel={handleUserInterruption}
       onTouchMove={handleUserInterruption}
-      className="flex justify-center w-full overflow-y-auto h-full sm:pt-12"
+      className="flex justify-center w-full overflow-y-auto h-full sm:pt-12 will-change-scroll"
     >
-      {queries.length > 0 && !atLast.current && (
+      {queries.length > 0 && !atLast && (
         <button
           onClick={scrollIntoView}
           aria-label="scroll to bottom"

From 89d5e7bee5bcb4c84b53ab60e6f63b20b8b33611 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 7 May 2025 19:15:36 +0530
Subject: [PATCH 18/26] (feat:attachment) store file in endpoint layer

---
 application/api/user/routes.py | 10 ++--
 application/worker.py          | 95 ++++++++++++++--------------------
 2 files changed, 46 insertions(+), 59 deletions(-)

diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index e10082d3..606f6cd3 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -28,6 +28,8 @@ from application.extensions import api
 from application.tts.google_tts import GoogleTTS
 from application.utils import check_required_fields, validate_function_name
 from application.vectorstore.vector_creator import VectorCreator
+from application.storage.storage_creator import StorageCreator
+storage = StorageCreator.get_storage()
 
 mongo = MongoDB.get_client()
 db = mongo[settings.MONGO_DB_NAME]
@@ -2978,14 +2980,14 @@ class StoreAttachment(Resource):
             attachment_id = ObjectId()
             original_filename = secure_filename(file.filename)
             relative_path = f"{settings.UPLOAD_FOLDER}/{user}/attachments/{str(attachment_id)}/{original_filename}"
-
-            file_content = file.read()
-
+            
+            metadata = storage.save_file(file, relative_path)
+            
             file_info = {
                 "filename": original_filename,
                 "attachment_id": str(attachment_id),
                 "path": relative_path,
-                "file_content": file_content,
+                "metadata": metadata
             }
 
             task = store_attachment.delay(file_info, user)
diff --git a/application/worker.py b/application/worker.py
index 619993c9..2f9e97f3 100755
--- a/application/worker.py
+++ b/application/worker.py
@@ -445,76 +445,61 @@ def attachment_worker(self, file_info, user):
     filename = file_info["filename"]
     attachment_id = file_info["attachment_id"]
     relative_path = file_info["path"]
-    file_content = file_info["file_content"]
+    metadata = file_info.get("metadata", {})
 
     try:
         self.update_state(state="PROGRESS", meta={"current": 10})
-        storage_type = getattr(settings, "STORAGE_TYPE", "local")
-        storage = StorageCreator.create_storage(storage_type)
+        storage = StorageCreator.get_storage()
+        
         self.update_state(
             state="PROGRESS", meta={"current": 30, "status": "Processing content"}
         )
 
-        with tempfile.NamedTemporaryFile(
-            suffix=os.path.splitext(filename)[1]
-        ) as temp_file:
-            temp_file.write(file_content)
-            temp_file.flush()
-            reader = SimpleDirectoryReader(
-                input_files=[temp_file.name], exclude_hidden=True, errors="ignore"
-            )
-            documents = reader.load_data()
+        content = storage.process_file(
+            relative_path,
+            lambda local_path, **kwargs: SimpleDirectoryReader(
+                input_files=[local_path], exclude_hidden=True, errors="ignore"
+            ).load_data()[0].text
+        )
+            
+        token_count = num_tokens_from_string(content)
 
-            if not documents:
-                logging.warning(f"No content extracted from file: {filename}")
-                raise ValueError(f"Failed to extract content from file: {filename}")
+        self.update_state(
+            state="PROGRESS", meta={"current": 80, "status": "Storing in database"}
+        )
 
-            content = documents[0].text
-            token_count = num_tokens_from_string(content)
+        mime_type = mimetypes.guess_type(filename)[0] or "application/octet-stream"
 
-            self.update_state(
-                state="PROGRESS", meta={"current": 60, "status": "Saving file"}
-            )
-            file_obj = io.BytesIO(file_content)
-
-            metadata = storage.save_file(file_obj, relative_path)
-
-            mime_type = mimetypes.guess_type(filename)[0] or "application/octet-stream"
-
-            self.update_state(
-                state="PROGRESS", meta={"current": 80, "status": "Storing in database"}
-            )
-
-            doc_id = ObjectId(attachment_id)
-            attachments_collection.insert_one(
-                {
-                    "_id": doc_id,
-                    "user": user,
-                    "path": relative_path,
-                    "content": content,
-                    "token_count": token_count,
-                    "mime_type": mime_type,
-                    "date": datetime.datetime.now(),
-                    "metadata": metadata,
-                }
-            )
-
-            logging.info(
-                f"Stored attachment with ID: {attachment_id}", extra={"user": user}
-            )
-
-            self.update_state(
-                state="PROGRESS", meta={"current": 100, "status": "Complete"}
-            )
-
-            return {
-                "filename": filename,
+        doc_id = ObjectId(attachment_id)
+        attachments_collection.insert_one(
+            {
+                "_id": doc_id,
+                "user": user,
                 "path": relative_path,
+                "content": content,
                 "token_count": token_count,
-                "attachment_id": attachment_id,
                 "mime_type": mime_type,
+                "date": datetime.datetime.now(),
                 "metadata": metadata,
             }
+        )
+
+        logging.info(
+            f"Stored attachment with ID: {attachment_id}", extra={"user": user}
+        )
+
+        self.update_state(
+            state="PROGRESS", meta={"current": 100, "status": "Complete"}
+        )
+
+        return {
+            "filename": filename,
+            "path": relative_path,
+            "token_count": token_count,
+            "attachment_id": attachment_id,
+            "mime_type": mime_type,
+            "metadata": metadata,
+        }
 
     except Exception as e:
         logging.error(

From ea6533db4e56ab516beb4e80e3274a41b8c9db2a Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 8 May 2025 00:11:02 +0530
Subject: [PATCH 19/26] (fix:attachment) strictly use filename

---
 application/api/user/routes.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index 606f6cd3..1ca8fc32 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -2978,7 +2978,7 @@ class StoreAttachment(Resource):
 
         try:
             attachment_id = ObjectId()
-            original_filename = secure_filename(file.filename)
+            original_filename = secure_filename(os.path.basename(file.filename))
             relative_path = f"{settings.UPLOAD_FOLDER}/{user}/attachments/{str(attachment_id)}/{original_filename}"
             
             metadata = storage.save_file(file, relative_path)

From d0a04d98014d41bdabc7348af47c24289809fd68 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 8 May 2025 00:14:42 +0530
Subject: [PATCH 20/26] (fix/lint) empty methods

---
 frontend/src/agents/NewAgent.tsx | 9 ++++++---
 frontend/src/modals/JWTModal.tsx | 9 ++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/agents/NewAgent.tsx b/frontend/src/agents/NewAgent.tsx
index 0a601699..475571cf 100644
--- a/frontend/src/agents/NewAgent.tsx
+++ b/frontend/src/agents/NewAgent.tsx
@@ -11,7 +11,10 @@ import AgentDetailsModal from '../modals/AgentDetailsModal';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState, Doc, Prompt } from '../models/misc';
 import {
-    selectSelectedAgent, selectSourceDocs, selectToken, setSelectedAgent
+  selectSelectedAgent,
+  selectSourceDocs,
+  selectToken,
+  setSelectedAgent,
 } from '../preferences/preferenceSlice';
 import PromptsModal from '../preferences/PromptsModal';
 import { UserToolType } from '../settings/types';
@@ -603,9 +606,9 @@ function AddPromptModal({
       newPromptContent={newPromptContent}
       setNewPromptContent={setNewPromptContent}
       editPromptName={''}
-      setEditPromptName={() => {}}
+      setEditPromptName={() => undefined}
       editPromptContent={''}
-      setEditPromptContent={() => {}}
+      setEditPromptContent={() => undefined}
       currentPromptEdit={{ id: '', name: '', type: '' }}
       handleAddPrompt={handleAddPrompt}
     />
diff --git a/frontend/src/modals/JWTModal.tsx b/frontend/src/modals/JWTModal.tsx
index 5f25b217..79f012dc 100644
--- a/frontend/src/modals/JWTModal.tsx
+++ b/frontend/src/modals/JWTModal.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { useDispatch } from 'react-redux';
 
 import Input from '../components/Input';
 import { ActiveState } from '../models/misc';
@@ -19,13 +18,17 @@ export default function JWTModal({
   if (modalState !== 'ACTIVE') return null;
 
   return (
-    <WrapperModal className="p-4" isPerformingTask={true} close={() => {}}>
+    <WrapperModal
+      className="p-4"
+      isPerformingTask={true}
+      close={() => undefined}
+    >
       <div className="mb-6">
         <span className="text-lg text-jet dark:text-bright-gray">
           Add JWT Token
         </span>
       </div>
-      <div className="relative mt-5 mb-4">
+      <div className="relative mb-4 mt-5">
         <Input
           name="JWT Token"
           type="text"

From ff532210f796984c18098bc68f985f5142305186 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 8 May 2025 00:15:28 +0530
Subject: [PATCH 21/26] lint

---
 frontend/src/About.tsx                        |  12 +-
 frontend/src/Hero.tsx                         |  19 +--
 frontend/src/PageNotFound.tsx                 |   2 +-
 frontend/src/agents/index.tsx                 |   1 -
 frontend/src/components/Accordion.tsx         |   4 +-
 .../src/components/DocumentPagination.tsx     |  30 ++--
 frontend/src/components/DropdownMenu.tsx      |   2 +-
 frontend/src/components/Help.tsx              |  10 +-
 frontend/src/components/MermaidRenderer.tsx   | 131 ++++++++--------
 frontend/src/components/ShareButton.tsx       |   2 +-
 frontend/src/components/Sidebar.tsx           |   2 +-
 frontend/src/components/SkeletonLoader.tsx    | 108 +++++++-------
 frontend/src/components/SourcesPopup.tsx      | 104 +++++++------
 frontend/src/components/ToggleSwitch.tsx      |   6 +-
 frontend/src/components/ToolsPopup.tsx        |  65 ++++----
 .../src/conversation/ConversationBubble.tsx   | 140 ++++++++++--------
 .../src/conversation/ConversationMessages.tsx |  17 ++-
 .../src/conversation/ConversationTile.tsx     |   2 +-
 .../src/conversation/SharedConversation.tsx   |  10 +-
 .../src/conversation/conversationHandlers.ts  |   4 +-
 .../src/conversation/conversationModels.ts    |   1 -
 frontend/src/index.css                        |   6 +-
 frontend/src/modals/AddActionModal.tsx        |   8 +-
 frontend/src/modals/AddToolModal.tsx          |  18 +--
 frontend/src/modals/ChunkModal.tsx            |  42 +++---
 frontend/src/modals/ConfigToolModal.tsx       |   4 +-
 frontend/src/modals/CreateAPIKeyModal.tsx     |   2 +-
 .../src/modals/ShareConversationModal.tsx     |   2 +-
 frontend/src/modals/WrapperModal.tsx          |   6 +-
 frontend/src/preferences/PromptsModal.tsx     |   8 +-
 frontend/src/settings/APIKeys.tsx             |  32 ++--
 frontend/src/settings/Analytics.tsx           |   9 +-
 frontend/src/settings/Documents.tsx           |  80 +++++-----
 frontend/src/settings/General.tsx             |  12 +-
 frontend/src/settings/Prompts.tsx             |   4 +-
 frontend/src/settings/ToolConfig.tsx          |  70 ++++-----
 frontend/src/settings/Tools.tsx               |  30 ++--
 frontend/src/upload/Upload.tsx                |  40 ++---
 38 files changed, 550 insertions(+), 495 deletions(-)

diff --git a/frontend/src/About.tsx b/frontend/src/About.tsx
index 90842c59..d2bbaac4 100644
--- a/frontend/src/About.tsx
+++ b/frontend/src/About.tsx
@@ -29,7 +29,7 @@ export default function About() {
             If you want to add your own documentation, please follow the
             instruction below:
           </p>
-          <p className="mt-4 ml-2">
+          <p className="ml-2 mt-4">
             1. Navigate to{' '}
             <span className="bg-gray-200 italic dark:bg-outer-space">
               {' '}
@@ -37,13 +37,13 @@ export default function About() {
             </span>{' '}
             folder
           </p>
-          <p className="mt-4 ml-2">
+          <p className="ml-2 mt-4">
             2. Install dependencies from{' '}
             <span className="bg-gray-200 italic dark:bg-outer-space">
               pip install -r requirements.txt
             </span>
           </p>
-          <p className="mt-4 ml-2">
+          <p className="ml-2 mt-4">
             3. Prepare a{' '}
             <span className="bg-gray-200 italic dark:bg-outer-space">.env</span>{' '}
             file. Copy{' '}
@@ -54,7 +54,7 @@ export default function About() {
             <span className="bg-gray-200 italic dark:bg-outer-space">.env</span>{' '}
             with your OpenAI API token
           </p>
-          <p className="mt-4 ml-2">
+          <p className="ml-2 mt-4">
             4. Run the app with{' '}
             <span className="bg-gray-200 italic dark:bg-outer-space">
               python app.py
@@ -64,9 +64,9 @@ export default function About() {
 
         <p>
           Currently It uses{' '}
-          <span className="text-blue-950 font-medium">DocsGPT</span>{' '}
+          <span className="font-medium text-blue-950">DocsGPT</span>{' '}
           documentation, so it will respond to information relevant to{' '}
-          <span className="text-blue-950 font-medium">DocsGPT</span>. If you
+          <span className="font-medium text-blue-950">DocsGPT</span>. If you
           want to train it on different documentation - please follow
           <a
             className="text-blue-500"
diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index 583f8a1b..a38394d7 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -19,18 +19,18 @@ export default function Hero({
   }>;
 
   return (
-    <div className="flex h-full w-full flex-col text-black-1000 dark:text-bright-gray items-center justify-between">
+    <div className="flex h-full w-full flex-col items-center justify-between text-black-1000 dark:text-bright-gray">
       {/* Header Section */}
-      <div className="flex flex-col items-center justify-center flex-grow pt-8 md:pt-0">
-        <div className="flex items-center mb-4">
+      <div className="flex flex-grow flex-col items-center justify-center pt-8 md:pt-0">
+        <div className="mb-4 flex items-center">
           <span className="text-4xl font-semibold">DocsGPT</span>
           <img className="mb-1 inline w-14" src={DocsGPT3} alt="docsgpt" />
         </div>
       </div>
 
       {/* Demo Buttons Section */}
-      <div className="w-full max-w-full mb-8 md:mb-16">
-        <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-3 md:gap-4 text-xs">
+      <div className="mb-8 w-full max-w-full md:mb-16">
+        <div className="grid grid-cols-1 gap-3 text-xs md:grid-cols-1 md:gap-4 lg:grid-cols-2">
           {demos?.map(
             (demo: { header: string; query: string }, key: number) =>
               demo.header &&
@@ -38,17 +38,12 @@ export default function Hero({
                 <button
                   key={key}
                   onClick={() => handleQuestion({ question: demo.query })}
-                  className={`
-                    w-full rounded-[66px] border bg-transparent px-6 py-[14px] text-left transition-colors
-                    border-dark-gray text-just-black hover:bg-cultured
-                    dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green
-                    ${key >= 2 ? 'hidden md:block' : ''} // Show only 2 buttons on mobile
-                  `}
+                  className={`w-full rounded-[66px] border border-dark-gray bg-transparent px-6 py-[14px] text-left text-just-black transition-colors hover:bg-cultured dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green ${key >= 2 ? 'hidden md:block' : ''} // Show only 2 buttons on mobile`}
                 >
                   <p className="mb-2 font-semibold text-black-1000 dark:text-bright-gray">
                     {demo.header}
                   </p>
-                  <span className="text-gray-700 dark:text-gray-300 opacity-60 line-clamp-2">
+                  <span className="line-clamp-2 text-gray-700 opacity-60 dark:text-gray-300">
                     {demo.query}
                   </span>
                 </button>
diff --git a/frontend/src/PageNotFound.tsx b/frontend/src/PageNotFound.tsx
index 0b86d7c1..4ee3a476 100644
--- a/frontend/src/PageNotFound.tsx
+++ b/frontend/src/PageNotFound.tsx
@@ -6,7 +6,7 @@ export default function PageNotFound() {
       <p className="mx-auto my-auto mt-20 flex w-full max-w-6xl flex-col place-items-center gap-6 rounded-3xl bg-gray-100 p-6 text-jet dark:bg-outer-space dark:text-gray-100 lg:p-10 xl:p-16">
         <h1>404</h1>
         <p>The page you are looking for does not exist.</p>
-        <button className="pointer-cursor mr-4 flex cursor-pointer items-center justify-center rounded-full bg-blue-1000 py-2 px-4 text-white transition-colors duration-100 hover:bg-blue-3000">
+        <button className="pointer-cursor mr-4 flex cursor-pointer items-center justify-center rounded-full bg-blue-1000 px-4 py-2 text-white transition-colors duration-100 hover:bg-blue-3000">
           <Link to="/">Go Back Home</Link>
         </button>
       </p>
diff --git a/frontend/src/agents/index.tsx b/frontend/src/agents/index.tsx
index c2edb34a..d0052111 100644
--- a/frontend/src/agents/index.tsx
+++ b/frontend/src/agents/index.tsx
@@ -3,7 +3,6 @@ import { useSelector, useDispatch } from 'react-redux';
 import { Route, Routes, useNavigate } from 'react-router-dom';
 
 import userService from '../api/services/userService';
-import Copy from '../assets/copy-linear.svg';
 import Edit from '../assets/edit.svg';
 import Monitoring from '../assets/monitoring.svg';
 import Trash from '../assets/red-trash.svg';
diff --git a/frontend/src/components/Accordion.tsx b/frontend/src/components/Accordion.tsx
index ec0a81d7..45c3170d 100644
--- a/frontend/src/components/Accordion.tsx
+++ b/frontend/src/components/Accordion.tsx
@@ -32,9 +32,9 @@ export default function Accordion({
     setIsOpen(!isOpen);
   };
   return (
-    <div className={`shadow-sm overflow-hidden ${className}`}>
+    <div className={`overflow-hidden shadow-sm ${className}`}>
       <button
-        className={`flex items-center justify-between w-full focus:outline-none ${titleClassName}`}
+        className={`flex w-full items-center justify-between focus:outline-none ${titleClassName}`}
         onClick={toggleAccordion}
       >
         <p className="break-words">{title}</p>
diff --git a/frontend/src/components/DocumentPagination.tsx b/frontend/src/components/DocumentPagination.tsx
index 6958d051..721ca2cf 100644
--- a/frontend/src/components/DocumentPagination.tsx
+++ b/frontend/src/components/DocumentPagination.tsx
@@ -52,31 +52,31 @@ const Pagination: React.FC<PaginationProps> = ({
   };
 
   return (
-    <div className="flex items-center text-xs justify-end gap-4 mt-2 p-2 border-gray-200">
+    <div className="mt-2 flex items-center justify-end gap-4 border-gray-200 p-2 text-xs">
       {/* Rows per page dropdown */}
-      <div className="flex items-center gap-2 relative">
+      <div className="relative flex items-center gap-2">
         <span className="text-gray-900 dark:text-gray-50">
           {t('pagination.rowsPerPage')}:
         </span>
         <div className="relative">
           <button
             onClick={toggleDropdown}
-            className="px-3 py-1 border rounded dark:bg-dark-charcoal dark:text-light-gray hover:bg-gray-200 dark:hover:bg-neutral-700"
+            className="rounded border px-3 py-1 hover:bg-gray-200 dark:bg-dark-charcoal dark:text-light-gray dark:hover:bg-neutral-700"
           >
             {rowsPerPage}
           </button>
           <div
-            className={`absolute z-50 right-0 mt-1 w-28 transform  bg-white dark:bg-dark-charcoal shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-200 ease-in-out ${
+            className={`absolute right-0 z-50 mt-1 w-28 transform bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-200 ease-in-out dark:bg-dark-charcoal ${
               isDropdownOpen
-                ? 'scale-100 opacity-100 block'
-                : 'scale-95 opacity-0 hidden'
+                ? 'block scale-100 opacity-100'
+                : 'hidden scale-95 opacity-0'
             }`}
           >
             {rowsPerPageOptions.map((option) => (
               <div
                 key={option}
                 onClick={() => handleSelectRowsPerPage(option)}
-                className={`cursor-pointer px-4 py-2 text-xs hover:bg-gray-100 dark:hover:bg-neutral-700  ${
+                className={`cursor-pointer px-4 py-2 text-xs hover:bg-gray-100 dark:hover:bg-neutral-700 ${
                   rowsPerPage === option
                     ? 'bg-gray-100 dark:bg-neutral-700 dark:text-light-gray'
                     : 'bg-white dark:bg-dark-charcoal dark:text-light-gray'
@@ -97,45 +97,45 @@ const Pagination: React.FC<PaginationProps> = ({
         <button
           onClick={handleFirstPage}
           disabled={currentPage === 1}
-          className="px-2 py-1 border rounded disabled:opacity-50"
+          className="rounded border px-2 py-1 disabled:opacity-50"
         >
           <img
             src={DoubleArrowLeft}
             alt={t('pagination.firstPage')}
-            className="dark:invert dark:sepia dark:brightness-200"
+            className="dark:brightness-200 dark:invert dark:sepia"
           />
         </button>
         <button
           onClick={handlePreviousPage}
           disabled={currentPage === 1}
-          className="px-2 py-1 border rounded disabled:opacity-50"
+          className="rounded border px-2 py-1 disabled:opacity-50"
         >
           <img
             src={SingleArrowLeft}
             alt={t('pagination.previousPage')}
-            className="dark:invert dark:sepia dark:brightness-200"
+            className="dark:brightness-200 dark:invert dark:sepia"
           />
         </button>
         <button
           onClick={handleNextPage}
           disabled={currentPage === totalPages}
-          className="px-2 py-1 border rounded disabled:opacity-50"
+          className="rounded border px-2 py-1 disabled:opacity-50"
         >
           <img
             src={SingleArrowRight}
             alt={t('pagination.nextPage')}
-            className="dark:invert dark:sepia dark:brightness-200"
+            className="dark:brightness-200 dark:invert dark:sepia"
           />
         </button>
         <button
           onClick={handleLastPage}
           disabled={currentPage === totalPages}
-          className="px-2 py-1 border rounded disabled:opacity-50"
+          className="rounded border px-2 py-1 disabled:opacity-50"
         >
           <img
             src={DoubleArrowRight}
             alt={t('pagination.lastPage')}
-            className="dark:invert dark:sepia dark:brightness-200"
+            className="dark:brightness-200 dark:invert dark:sepia"
           />
         </button>
       </div>
diff --git a/frontend/src/components/DropdownMenu.tsx b/frontend/src/components/DropdownMenu.tsx
index 56242d7a..3fe85508 100644
--- a/frontend/src/components/DropdownMenu.tsx
+++ b/frontend/src/components/DropdownMenu.tsx
@@ -88,7 +88,7 @@ export default function DropdownMenu({
       onClick={(e) => e.stopPropagation()}
     >
       <div
-        className={`w-28 transform rounded-md bg-white dark:bg-dark-charcoal shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-200 ease-in-out ${className}`}
+        className={`w-28 transform rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-200 ease-in-out dark:bg-dark-charcoal ${className}`}
       >
         <div
           role="menu"
diff --git a/frontend/src/components/Help.tsx b/frontend/src/components/Help.tsx
index 44bcb057..043d3d4f 100644
--- a/frontend/src/components/Help.tsx
+++ b/frontend/src/components/Help.tsx
@@ -36,20 +36,20 @@ const Help = () => {
       <button
         ref={buttonRef}
         onClick={toggleDropdown}
-        className="my-auto mx-4 w-full flex items-center h-9 gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
+        className="mx-4 my-auto flex h-9 w-full items-center gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
       >
         <img src={Info} alt="info" className="ml-2 w-5 filter dark:invert" />
         {t('help')}
       </button>
       {isOpen && (
         <div
-          className={`absolute translate-x-4 -translate-y-28 z-10 w-48 shadow-lg bg-white dark:bg-[#444654] rounded-xl`}
+          className={`absolute z-10 w-48 -translate-y-28 translate-x-4 rounded-xl bg-white shadow-lg dark:bg-[#444654]`}
         >
           <a
             href="https://docs.docsgpt.cloud/"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-start gap-4 px-4 py-2 text-black dark:text-white hover:bg-bright-gray dark:hover:bg-[#545561] rounded-t-xl"
+            className="flex items-start gap-4 rounded-t-xl px-4 py-2 text-black hover:bg-bright-gray dark:text-white dark:hover:bg-[#545561]"
           >
             <img
               src={PageIcon}
@@ -61,12 +61,12 @@ const Help = () => {
           </a>
           <a
             href="mailto:support@docsgpt.cloud"
-            className="flex items-start gap-4 px-4 py-2 text-black dark:text-white hover:bg-bright-gray dark:hover:bg-[#545561] rounded-b-xl"
+            className="flex items-start gap-4 rounded-b-xl px-4 py-2 text-black hover:bg-bright-gray dark:text-white dark:hover:bg-[#545561]"
           >
             <img
               src={EmailIcon}
               alt="Email Us"
-              className="filter dark:invert p-0.5"
+              className="p-0.5 filter dark:invert"
               width={20}
             />
             {t('emailUs')}
diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
index 06d5628b..bc56f023 100644
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -2,7 +2,10 @@ import React, { useEffect, useRef, useState } from 'react';
 import mermaid from 'mermaid';
 import CopyButton from './CopyButton';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneLight, vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import {
+  oneLight,
+  vscDarkPlus,
+} from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { MermaidRendererProps } from './types';
 import { useSelector } from 'react-redux';
 import { selectStatus } from '../conversation/conversationSlice';
@@ -20,9 +23,12 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   const [showDownloadMenu, setShowDownloadMenu] = useState<boolean>(false);
   const downloadMenuRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
-  const [hoverPosition, setHoverPosition] = useState<{ x: number, y: number } | null>(null);
+  const [hoverPosition, setHoverPosition] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
   const [isHovering, setIsHovering] = useState<boolean>(false);
-  const [zoomFactor, setZoomFactor] = useState<number>(2); 
+  const [zoomFactor, setZoomFactor] = useState<number>(2);
 
   const handleMouseMove = (event: React.MouseEvent) => {
     if (!containerRef.current) return;
@@ -40,16 +46,14 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
     setHoverPosition(null);
   };
 
-
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (!isHovering) return;
 
     if (event.key === '+' || event.key === '=') {
-      setZoomFactor(prev => Math.min(6, prev + 0.5)); // Cap at 6x
+      setZoomFactor((prev) => Math.min(6, prev + 0.5)); // Cap at 6x
       event.preventDefault();
-    }
-    else if (event.key === '-') {
-      setZoomFactor(prev => Math.max(1, prev - 0.5)); // Minimum 1x
+    } else if (event.key === '-') {
+      setZoomFactor((prev) => Math.max(1, prev - 0.5)); // Minimum 1x
       event.preventDefault();
     }
   };
@@ -57,13 +61,13 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   const handleWheel = (event: React.WheelEvent) => {
     if (!isHovering) return;
 
-    if ( event.ctrlKey || event.metaKey) {
+    if (event.ctrlKey || event.metaKey) {
       event.preventDefault();
 
       if (event.deltaY < 0) {
-        setZoomFactor(prev => Math.min(6, prev + 0.25));
+        setZoomFactor((prev) => Math.min(6, prev + 0.25));
       } else {
-        setZoomFactor(prev => Math.max(1, prev - 0.25));
+        setZoomFactor((prev) => Math.max(1, prev - 0.25));
       }
     }
   };
@@ -81,8 +85,9 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
         securityLevel: 'loose',
         suppressErrorRendering: true,
       });
-  
-      const isCurrentlyLoading = isLoading !== undefined ? isLoading : status === 'loading';
+
+      const isCurrentlyLoading =
+        isLoading !== undefined ? isLoading : status === 'loading';
       if (!isCurrentlyLoading && code) {
         try {
           const element = document.getElementById(diagramId.current);
@@ -93,7 +98,9 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
           }
         } catch (err) {
           console.error('Error rendering mermaid diagram:', err);
-          setError(`Failed to render diagram: ${err instanceof Error ? err.message : String(err)}`);
+          setError(
+            `Failed to render diagram: ${err instanceof Error ? err.message : String(err)}`,
+          );
         }
       }
     };
@@ -101,9 +108,6 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
     renderDiagram();
   }, [code, isDarkTheme, isLoading]);
 
-
- 
-
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -120,7 +124,6 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
     };
   }, [showDownloadMenu]);
 
-
   const downloadSvg = (): void => {
     const element = document.getElementById(diagramId.current);
     if (!element) return;
@@ -146,7 +149,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
 
     const svgBlob = new Blob(
       [`<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n${svgString}`],
-      { type: 'image/svg+xml' }
+      { type: 'image/svg+xml' },
     );
 
     const url = URL.createObjectURL(svgBlob);
@@ -198,7 +201,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
     const img = new Image();
     img.crossOrigin = 'anonymous';
 
-    img.onload = function(): void {
+    img.onload = function (): void {
       const canvas = document.createElement('canvas');
       canvas.width = width;
       canvas.height = height;
@@ -243,20 +246,20 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
     URL.revokeObjectURL(url);
   };
 
-
   const downloadOptions = [
     { label: 'Download as SVG', action: downloadSvg },
     { label: 'Download as PNG', action: downloadPng },
     { label: 'Download as MMD', action: downloadMmd },
   ];
 
-  const isCurrentlyLoading = isLoading !== undefined ? isLoading : status === 'loading';
+  const isCurrentlyLoading =
+    isLoading !== undefined ? isLoading : status === 'loading';
   const showDiagramOptions = !isCurrentlyLoading && !error;
   const errorRender = !isCurrentlyLoading && error;
 
   return (
-    <div className="group relative rounded-lg border border-light-silver dark:border-raisin-black bg-white dark:bg-eerie-black  w-inherit">
-      <div className="flex justify-between items-center px-2 py-1 bg-platinum dark:bg-eerie-black-2">
+    <div className="w-inherit group relative rounded-lg border border-light-silver bg-white dark:border-raisin-black dark:bg-eerie-black">
+      <div className="flex items-center justify-between bg-platinum px-2 py-1 dark:bg-eerie-black-2">
         <span className="text-xs font-medium text-just-black dark:text-chinese-white">
           mermaid
         </span>
@@ -267,13 +270,13 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
             <div className="relative" ref={downloadMenuRef}>
               <button
                 onClick={() => setShowDownloadMenu(!showDownloadMenu)}
-                className="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded flex items-center h-full"
+                className="flex h-full items-center rounded bg-gray-100 px-2 py-1 text-xs dark:bg-gray-700"
                 title="Download options"
               >
                 Download <span className="ml-1">▼</span>
               </button>
               {showDownloadMenu && (
-                <div className="absolute right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded shadow-lg z-10 w-40">
+                <div className="absolute right-0 z-10 mt-1 w-40 rounded border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
                   <ul>
                     {downloadOptions.map((option, index) => (
                       <li key={index}>
@@ -282,7 +285,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
                             option.action();
                             setShowDownloadMenu(false);
                           }}
-                          className="text-xs px-4 py-2 w-full text-left hover:bg-gray-100 dark:hover:bg-gray-700"
+                          className="w-full px-4 py-2 text-left text-xs hover:bg-gray-100 dark:hover:bg-gray-700"
                         >
                           {option.label}
                         </button>
@@ -297,7 +300,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
           {showDiagramOptions && (
             <button
               onClick={() => setShowCode(!showCode)}
-              className={`text-xs px-2 py-1 rounded flex items-center h-full ${
+              className={`flex h-full items-center rounded px-2 py-1 text-xs ${
                 showCode
                   ? 'bg-blue-200 dark:bg-blue-800'
                   : 'bg-gray-100 dark:bg-gray-700'
@@ -311,14 +314,14 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
       </div>
 
       {isCurrentlyLoading ? (
-        <div className="p-4 bg-white dark:bg-eerie-black flex justify-center items-center">
+        <div className="flex items-center justify-center bg-white p-4 dark:bg-eerie-black">
           <div className="text-sm text-gray-500 dark:text-gray-400">
             Loading diagram...
           </div>
         </div>
       ) : errorRender ? (
-        <div className="border-2 border-red-400 dark:border-red-700 rounded m-2">
-          <div className="bg-red-100 dark:bg-red-900/30 px-4 py-2 text-red-800 dark:text-red-300 text-sm whitespace-normal break-words overflow-auto">
+        <div className="m-2 rounded border-2 border-red-400 dark:border-red-700">
+          <div className="overflow-auto whitespace-normal break-words bg-red-100 px-4 py-2 text-sm text-red-800 dark:bg-red-900/30 dark:text-red-300">
             {error}
           </div>
         </div>
@@ -326,13 +329,12 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
         <>
           <div
             ref={containerRef}
-            className=" no-scrollbar p-4 block w-full bg-white dark:bg-eerie-black relative"
+            className="no-scrollbar relative block w-full bg-white p-4 dark:bg-eerie-black"
             style={{
               overflow: 'auto',
               scrollbarWidth: 'none',
               msOverflowStyle: 'none',
               width: '100%',
-
             }}
             onMouseMove={handleMouseMove}
             onMouseEnter={handleMouseEnter}
@@ -340,39 +342,42 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
             onKeyDown={handleKeyDown}
             onWheel={handleWheel}
             tabIndex={0}
-            
           >
             {isHovering && (
               <>
-              <div className="absolute top-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded z-10 flex items-center gap-2">
-                <button
-                  onClick={() => setZoomFactor(prev => Math.max(1, prev - 0.5))}
-                  className="hover:bg-gray-600 px-1 rounded"
-                  title="Decrease zoom"
-                >
-                  -
-                </button>
-                <span
-                  className="cursor-pointer hover:underline"
-                  onClick={() => {
-                    setZoomFactor(2);
-                  }}
-                  title="Reset zoom"
-                >
-                  {zoomFactor.toFixed(1)}x
-                </span>
-                <button
-                  onClick={() => setZoomFactor(prev => Math.min(6, prev + 0.5))}
-                  className="hover:bg-gray-600 px-1 rounded"
-                  title="Increase zoom"
-                >
-                  +
-                </button>
-              </div>
+                <div className="absolute right-2 top-2 z-10 flex items-center gap-2 rounded bg-black/70 px-2 py-1 text-xs text-white">
+                  <button
+                    onClick={() =>
+                      setZoomFactor((prev) => Math.max(1, prev - 0.5))
+                    }
+                    className="rounded px-1 hover:bg-gray-600"
+                    title="Decrease zoom"
+                  >
+                    -
+                  </button>
+                  <span
+                    className="cursor-pointer hover:underline"
+                    onClick={() => {
+                      setZoomFactor(2);
+                    }}
+                    title="Reset zoom"
+                  >
+                    {zoomFactor.toFixed(1)}x
+                  </span>
+                  <button
+                    onClick={() =>
+                      setZoomFactor((prev) => Math.min(6, prev + 0.5))
+                    }
+                    className="rounded px-1 hover:bg-gray-600"
+                    title="Increase zoom"
+                  >
+                    +
+                  </button>
+                </div>
               </>
             )}
             <pre
-              className="mermaid select-none w-full"
+              className="mermaid w-full select-none"
               id={diagramId.current}
               key={`mermaid-${diagramId.current}`}
               style={{
@@ -382,7 +387,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
                 cursor: 'default',
                 width: '100%',
                 display: 'flex',
-                justifyContent: 'center'
+                justifyContent: 'center',
               }}
             >
               {code}
@@ -391,7 +396,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
 
           {showCode && (
             <div className="border-t border-light-silver dark:border-raisin-black">
-              <div className="p-2 bg-platinum dark:bg-eerie-black-2">
+              <div className="bg-platinum p-2 dark:bg-eerie-black-2">
                 <span className="text-xs font-medium text-just-black dark:text-chinese-white">
                   Mermaid Code
                 </span>
@@ -403,7 +408,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
                   margin: 0,
                   borderRadius: 0,
                   scrollbarWidth: 'thin',
-                  maxHeight: '300px'
+                  maxHeight: '300px',
                 }}
               >
                 {code}
diff --git a/frontend/src/components/ShareButton.tsx b/frontend/src/components/ShareButton.tsx
index 8d4a93de..e912ea22 100644
--- a/frontend/src/components/ShareButton.tsx
+++ b/frontend/src/components/ShareButton.tsx
@@ -15,7 +15,7 @@ export default function ShareButton({ conversationId }: ShareButtonProps) {
         onClick={() => {
           setShareModalState(true);
         }}
-        className="absolute top-4 right-20 z-20 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
+        className="absolute right-20 top-4 z-20 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
       >
         <img
           className="m-2 h-5 w-5 filter dark:invert"
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index f0f4878b..f7ea21a4 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -45,7 +45,7 @@ export default function Sidebar({
             <img className="filter dark:invert" src={Exit} />
           </button>
         </div>
-        <div className="flex h-full flex-col items-center gap-2 py-4 px-6 text-center">
+        <div className="flex h-full flex-col items-center gap-2 px-6 py-4 text-center">
           {children}
         </div>
       </div>
diff --git a/frontend/src/components/SkeletonLoader.tsx b/frontend/src/components/SkeletonLoader.tsx
index 2433110a..71b796d8 100644
--- a/frontend/src/components/SkeletonLoader.tsx
+++ b/frontend/src/components/SkeletonLoader.tsx
@@ -42,17 +42,17 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
     <>
       {[...Array(4)].map((_, idx) => (
         <tr key={idx} className="animate-pulse">
-          <td className="py-4 px-4 w-[45%]">
-            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full"></div>
+          <td className="w-[45%] px-4 py-4">
+            <div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
           </td>
-          <td className="py-4 px-4 w-[20%]">
-            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full"></div>
+          <td className="w-[20%] px-4 py-4">
+            <div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
           </td>
-          <td className="py-4 px-4 w-[25%]">
-            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full"></div>
+          <td className="w-[25%] px-4 py-4">
+            <div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
           </td>
-          <td className="py-4 px-4 w-[10%]">
-            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full"></div>
+          <td className="w-[10%] px-4 py-4">
+            <div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
           </td>
         </tr>
       ))}
@@ -64,16 +64,16 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
       {[...Array(4)].map((_, idx) => (
         <tr key={idx} className="animate-pulse">
           <td className="p-2">
-            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4 mx-auto"></div>
+            <div className="mx-auto h-4 w-3/4 rounded bg-gray-300 dark:bg-gray-600"></div>
           </td>
           <td className="p-2">
-            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full mx-auto"></div>
+            <div className="mx-auto h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
           </td>
           <td className="p-2">
-            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full mx-auto"></div>
+            <div className="mx-auto h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
           </td>
           <td className="p-2">
-            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-8 mx-auto"></div>
+            <div className="mx-auto h-4 w-8 rounded bg-gray-300 dark:bg-gray-600"></div>
           </td>
         </tr>
       ))}
@@ -82,10 +82,10 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
 
   const renderDropdown = () => (
     <div className="animate-pulse">
-      <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-24 mb-2"></div>
-      <div className="w-[360px] h-14 bg-gray-300 dark:bg-gray-600 rounded-3xl flex items-center justify-between px-4">
-        <div className="h-3 bg-gray-400 dark:bg-gray-700 rounded w-24"></div>
-        <div className="h-3 w-3 bg-gray-400 dark:bg-gray-700 rounded"></div>
+      <div className="mb-2 h-4 w-24 rounded bg-gray-300 dark:bg-gray-600"></div>
+      <div className="flex h-14 w-[360px] items-center justify-between rounded-3xl bg-gray-300 px-4 dark:bg-gray-600">
+        <div className="h-3 w-24 rounded bg-gray-400 dark:bg-gray-700"></div>
+        <div className="h-3 w-3 rounded bg-gray-400 dark:bg-gray-700"></div>
       </div>
     </div>
   );
@@ -95,14 +95,14 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
       {[...Array(8)].map((_, idx) => (
         <div
           key={idx}
-          className="w-full flex items-start p-2 hover:bg-[#F9F9F9] hover:dark:bg-dark-charcoal"
+          className="flex w-full items-start p-2 hover:bg-[#F9F9F9] hover:dark:bg-dark-charcoal"
         >
-          <div className="w-full flex items-center gap-2">
-            <div className="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-lg"></div>
-            <div className="w-full flex flex-row items-center gap-2">
-              <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded-lg w-[30%] lg:w-52"></div>
-              <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded-lg w-[16%] lg:w-28"></div>
-              <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded-lg w-[40%] lg:w-64"></div>
+          <div className="flex w-full items-center gap-2">
+            <div className="h-3 w-3 rounded-lg bg-gray-300 dark:bg-gray-600"></div>
+            <div className="flex w-full flex-row items-center gap-2">
+              <div className="h-3 w-[30%] rounded-lg bg-gray-300 dark:bg-gray-600 lg:w-52"></div>
+              <div className="h-3 w-[16%] rounded-lg bg-gray-300 dark:bg-gray-600 lg:w-28"></div>
+              <div className="h-3 w-[40%] rounded-lg bg-gray-300 dark:bg-gray-600 lg:w-64"></div>
             </div>
           </div>
         </div>
@@ -117,32 +117,32 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
           key={idx}
           className={`p-6 ${
             skeletonCount === 1 ? 'w-full' : 'w-60'
-          } dark:bg-raisin-black rounded-3xl animate-pulse`}
+          } animate-pulse rounded-3xl dark:bg-raisin-black`}
         >
           <div className="space-y-4">
             <div>
-              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-3/4"></div>
-              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-5/6"></div>
-              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-1/2"></div>
-              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-3/4"></div>
-              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-full"></div>
+              <div className="mb-2 h-4 w-3/4 rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-5/6 rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-1/2 rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-3/4 rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
             </div>
-            <div className="border-t border-gray-400 dark:border-gray-700 my-4"></div>
+            <div className="my-4 border-t border-gray-400 dark:border-gray-700"></div>
             <div>
-              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-2/3"></div>
-              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-1/4"></div>
-              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-full"></div>
+              <div className="mb-2 h-4 w-2/3 rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-1/4 rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
             </div>
-            <div className="border-t border-gray-400 dark:border-gray-700 my-4"></div>
+            <div className="my-4 border-t border-gray-400 dark:border-gray-700"></div>
             <div>
-              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-5/6"></div>
-              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-1/3"></div>
-              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-2/3"></div>
-              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded mb-2 w-full"></div>
+              <div className="mb-2 h-4 w-5/6 rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-1/3 rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-2/3 rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
             </div>
-            <div className="border-t border-gray-400 dark:border-gray-700 my-4"></div>
-            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
-            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-5/6 mb-2"></div>
+            <div className="my-4 border-t border-gray-400 dark:border-gray-700"></div>
+            <div className="mb-2 h-4 w-3/4 rounded bg-gray-300 dark:bg-gray-600"></div>
+            <div className="mb-2 h-4 w-5/6 rounded bg-gray-300 dark:bg-gray-600"></div>
           </div>
         </div>
       ))}
@@ -154,27 +154,27 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
       {[...Array(skeletonCount)].map((_, idx) => (
         <div
           key={idx}
-          className="p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse"
+          className="w-full animate-pulse rounded-3xl p-6 dark:bg-raisin-black"
         >
           <div className="space-y-6">
             <div className="space-y-2">
-              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-1/3 mb-4"></div>
-              <div className="grid grid-cols-6 gap-2 items-end">
-                <div className="h-32 bg-gray-300 dark:bg-gray-600 rounded"></div>
-                <div className="h-24 bg-gray-300 dark:bg-gray-600 rounded"></div>
-                <div className="h-40 bg-gray-300 dark:bg-gray-600 rounded"></div>
-                <div className="h-28 bg-gray-300 dark:bg-gray-600 rounded"></div>
-                <div className="h-36 bg-gray-300 dark:bg-gray-600 rounded"></div>
-                <div className="h-20 bg-gray-300 dark:bg-gray-600 rounded"></div>
+              <div className="mb-4 h-4 w-1/3 rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="grid grid-cols-6 items-end gap-2">
+                <div className="h-32 rounded bg-gray-300 dark:bg-gray-600"></div>
+                <div className="h-24 rounded bg-gray-300 dark:bg-gray-600"></div>
+                <div className="h-40 rounded bg-gray-300 dark:bg-gray-600"></div>
+                <div className="h-28 rounded bg-gray-300 dark:bg-gray-600"></div>
+                <div className="h-36 rounded bg-gray-300 dark:bg-gray-600"></div>
+                <div className="h-20 rounded bg-gray-300 dark:bg-gray-600"></div>
               </div>
             </div>
             <div className="space-y-2">
-              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-1/4 mb-4"></div>
-              <div className="h-32 bg-gray-300 dark:bg-gray-600 rounded"></div>
+              <div className="mb-4 h-4 w-1/4 rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="h-32 rounded bg-gray-300 dark:bg-gray-600"></div>
             </div>
             <div className="grid grid-cols-2 gap-4">
-              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full"></div>
-              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full"></div>
+              <div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
             </div>
           </div>
         </div>
diff --git a/frontend/src/components/SourcesPopup.tsx b/frontend/src/components/SourcesPopup.tsx
index 088b3eb1..6846cf84 100644
--- a/frontend/src/components/SourcesPopup.tsx
+++ b/frontend/src/components/SourcesPopup.tsx
@@ -32,8 +32,13 @@ export default function SourcesPopup({
   const { t } = useTranslation();
   const popupRef = useRef<HTMLDivElement>(null);
   const [searchTerm, setSearchTerm] = useState('');
-  const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0, maxHeight: 0, showAbove: false });
-  
+  const [popupPosition, setPopupPosition] = useState({
+    top: 0,
+    left: 0,
+    maxHeight: 0,
+    showAbove: false,
+  });
+
   const embeddingsName =
     import.meta.env.VITE_EMBEDDINGS_NAME ||
     'huggingface_sentence-transformers/all-mpnet-base-v2';
@@ -41,16 +46,16 @@ export default function SourcesPopup({
   const options = useSelector(selectSourceDocs);
   const selectedDocs = useSelector(selectSelectedDocs);
 
-  const filteredOptions = options?.filter(option => 
-    option.name.toLowerCase().includes(searchTerm.toLowerCase())
+  const filteredOptions = options?.filter((option) =>
+    option.name.toLowerCase().includes(searchTerm.toLowerCase()),
   );
 
   useLayoutEffect(() => {
     if (!isOpen || !anchorRef.current) return;
-    
+
     const updatePosition = () => {
       if (!anchorRef.current) return;
-      
+
       const rect = anchorRef.current.getBoundingClientRect();
       const viewportHeight = window.innerHeight;
       const viewportWidth = window.innerWidth;
@@ -60,17 +65,17 @@ export default function SourcesPopup({
       const maxHeight = showAbove ? spaceAbove - 16 : spaceBelow - 16;
       const left = Math.min(
         rect.left,
-        viewportWidth - Math.min(480, viewportWidth * 0.95) - 10
+        viewportWidth - Math.min(480, viewportWidth * 0.95) - 10,
       );
-      
+
       setPopupPosition({
         top: showAbove ? rect.top - 8 : rect.bottom + 8,
         left,
         maxHeight: Math.min(600, maxHeight),
-        showAbove
+        showAbove,
       });
     };
-    
+
     updatePosition();
     window.addEventListener('resize', updatePosition);
     return () => window.removeEventListener('resize', updatePosition);
@@ -111,10 +116,12 @@ export default function SourcesPopup({
   return (
     <div
       ref={popupRef}
-      className="fixed z-50 bg-lotion dark:bg-charleston-green-2 rounded-xl shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033] flex flex-col"
+      className="fixed z-50 flex flex-col rounded-xl bg-lotion shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033] dark:bg-charleston-green-2"
       style={{
         top: popupPosition.showAbove ? popupPosition.top : undefined,
-        bottom: popupPosition.showAbove ? undefined : window.innerHeight - popupPosition.top,
+        bottom: popupPosition.showAbove
+          ? undefined
+          : window.innerHeight - popupPosition.top,
         left: popupPosition.left,
         maxWidth: Math.min(480, window.innerWidth * 0.95),
         width: '100%',
@@ -122,12 +129,12 @@ export default function SourcesPopup({
         transform: popupPosition.showAbove ? 'translateY(-100%)' : 'none',
       }}
     >
-      <div className="flex flex-col h-full">
-        <div className="px-4 md:px-6 py-4 flex-shrink-0">
-          <h2 className="text-lg font-bold text-[#141414] dark:text-bright-gray mb-4 dark:text-[20px]">
+      <div className="flex h-full flex-col">
+        <div className="flex-shrink-0 px-4 py-4 md:px-6">
+          <h2 className="mb-4 text-lg font-bold text-[#141414] dark:text-[20px] dark:text-bright-gray">
             {t('conversation.sources.text')}
           </h2>
-          
+
           <Input
             id="source-search"
             name="source-search"
@@ -141,7 +148,7 @@ export default function SourcesPopup({
           />
         </div>
 
-        <div className="flex-grow overflow-y-auto mx-4 border border-[#D9D9D9] dark:border-dim-gray rounded-md [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
+        <div className="mx-4 flex-grow overflow-y-auto rounded-md border border-[#D9D9D9] dark:border-dim-gray [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
           {options ? (
             <>
               {filteredOptions?.map((option: any, index: number) => {
@@ -149,7 +156,7 @@ export default function SourcesPopup({
                   return (
                     <div
                       key={index}
-                      className="flex cursor-pointer items-center p-3 hover:bg-gray-100 dark:hover:bg-[#2C2E3C] transition-colors border-b border-[#D9D9D9] dark:border-dim-gray border-opacity-80 dark:text-[14px]"
+                      className="flex cursor-pointer items-center border-b border-[#D9D9D9] border-opacity-80 p-3 transition-colors hover:bg-gray-100 dark:border-dim-gray dark:text-[14px] dark:hover:bg-[#2C2E3C]"
                       onClick={() => {
                         dispatch(setSelectedDocs(option));
                         handlePostDocumentSelect(option);
@@ -159,23 +166,26 @@ export default function SourcesPopup({
                       <img
                         src={SourceIcon}
                         alt="Source"
-                        width={14} height={14}
+                        width={14}
+                        height={14}
                         className="mr-3 flex-shrink-0"
                       />
-                      <span className="text-[#5D5D5D] dark:text-bright-gray font-medium flex-grow overflow-hidden overflow-ellipsis whitespace-nowrap mr-3">
+                      <span className="mr-3 flex-grow overflow-hidden overflow-ellipsis whitespace-nowrap font-medium text-[#5D5D5D] dark:text-bright-gray">
                         {option.name}
                       </span>
-                      <div className={`w-4 h-4 border flex-shrink-0 flex items-center justify-center p-[0.5px] dark:border-[#757783] border-[#C6C6C6]`}>
-                        {selectedDocs && 
-                          (option.id ? 
-                            selectedDocs.id === option.id :  // For documents with MongoDB IDs
-                            selectedDocs.date === option.date) &&  // For preloaded sources
-                          <img
-                            src={CheckIcon}
-                            alt="Selected"
-                            className="h-3 w-3"
-                          />
-                        }
+                      <div
+                        className={`flex h-4 w-4 flex-shrink-0 items-center justify-center border border-[#C6C6C6] p-[0.5px] dark:border-[#757783]`}
+                      >
+                        {selectedDocs &&
+                          (option.id
+                            ? selectedDocs.id === option.id // For documents with MongoDB IDs
+                            : selectedDocs.date === option.date) && ( // For preloaded sources
+                            <img
+                              src={CheckIcon}
+                              alt="Selected"
+                              className="h-3 w-3"
+                            />
+                          )}
                       </div>
                     </div>
                   );
@@ -183,14 +193,22 @@ export default function SourcesPopup({
                 return null;
               })}
               <div
-                className="flex cursor-pointer items-center p-3 hover:bg-gray-100 dark:hover:bg-[#2C2E3C] transition-colors border-b border-[#D9D9D9] dark:border-dim-gray border-opacity-80 dark:text-[14px]"
+                className="flex cursor-pointer items-center border-b border-[#D9D9D9] border-opacity-80 p-3 transition-colors hover:bg-gray-100 dark:border-dim-gray dark:text-[14px] dark:hover:bg-[#2C2E3C]"
                 onClick={handleEmptyDocumentSelect}
               >
-                <img width={14} height={14} src={SourceIcon} alt="Source" className="mr-3 flex-shrink-0" />
-                <span className="text-[#5D5D5D] dark:text-bright-gray font-medium flex-grow mr-3">
+                <img
+                  width={14}
+                  height={14}
+                  src={SourceIcon}
+                  alt="Source"
+                  className="mr-3 flex-shrink-0"
+                />
+                <span className="mr-3 flex-grow font-medium text-[#5D5D5D] dark:text-bright-gray">
                   {t('none')}
                 </span>
-                <div className={`w-4 h-4 border flex-shrink-0 flex items-center justify-center p-[0.5px] dark:border-[#757783] border-[#C6C6C6]`}>
+                <div
+                  className={`flex h-4 w-4 flex-shrink-0 items-center justify-center border border-[#C6C6C6] p-[0.5px] dark:border-[#757783]`}
+                >
                   {selectedDocs === null && (
                     <img src={CheckIcon} alt="Selected" className="h-3 w-3" />
                   )}
@@ -198,27 +216,27 @@ export default function SourcesPopup({
               </div>
             </>
           ) : (
-            <div className="p-4 text-center text-gray-500 dark:text-bright-gray dark:text-[14px]">
+            <div className="p-4 text-center text-gray-500 dark:text-[14px] dark:text-bright-gray">
               {t('noSourcesAvailable')}
             </div>
           )}
         </div>
 
-        <div className="px-4 md:px-6 py-4 opacity-75 hover:opacity-100 transition-opacity duration-200 flex-shrink-0">
-          <a 
-            href="/settings/documents" 
-            className="text-violets-are-blue text-base font-medium inline-flex items-center gap-2"
+        <div className="flex-shrink-0 px-4 py-4 opacity-75 transition-opacity duration-200 hover:opacity-100 md:px-6">
+          <a
+            href="/settings/documents"
+            className="inline-flex items-center gap-2 text-base font-medium text-violets-are-blue"
             onClick={onClose}
           >
             Go to Documents
-            <img src={RedirectIcon} alt="Redirect" className="w-3 h-3" />
+            <img src={RedirectIcon} alt="Redirect" className="h-3 w-3" />
           </a>
         </div>
 
-        <div className="px-4 md:px-6 py-3 flex justify-start flex-shrink-0">
+        <div className="flex flex-shrink-0 justify-start px-4 py-3 md:px-6">
           <button
             onClick={handleUploadClick}
-            className="py-2 px-4 rounded-full border text-violets-are-blue hover:bg-violets-are-blue border-violets-are-blue hover:text-white transition-colors duration-200 text-[14px] font-medium w-auto"
+            className="w-auto rounded-full border border-violets-are-blue px-4 py-2 text-[14px] font-medium text-violets-are-blue transition-colors duration-200 hover:bg-violets-are-blue hover:text-white"
           >
             Upload new
           </button>
diff --git a/frontend/src/components/ToggleSwitch.tsx b/frontend/src/components/ToggleSwitch.tsx
index 3a4ed7db..69530e79 100644
--- a/frontend/src/components/ToggleSwitch.tsx
+++ b/frontend/src/components/ToggleSwitch.tsx
@@ -46,9 +46,9 @@ const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
 
   return (
     <label
-      className={`cursor-pointer select-none flex flex-row items-center ${
+      className={`flex cursor-pointer select-none flex-row items-center ${
         labelPosition === 'right' ? 'flex-row-reverse' : ''
-      } ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
+      } ${disabled ? 'cursor-not-allowed opacity-50' : ''} ${className}`}
     >
       {label && (
         <span
@@ -75,7 +75,7 @@ const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
           }`}
         ></div>
         <div
-          className={`absolute ${toggle} flex items-center justify-center rounded-full transition bg-white opacity-80 ${
+          className={`absolute ${toggle} flex items-center justify-center rounded-full bg-white opacity-80 transition ${
             checked ? `${translate} bg-silver` : ''
           }`}
         ></div>
diff --git a/frontend/src/components/ToolsPopup.tsx b/frontend/src/components/ToolsPopup.tsx
index f0466e95..5fdd6c23 100644
--- a/frontend/src/components/ToolsPopup.tsx
+++ b/frontend/src/components/ToolsPopup.tsx
@@ -29,18 +29,23 @@ export default function ToolsPopup({
   const [searchTerm, setSearchTerm] = useState('');
   const [isDarkTheme] = useDarkTheme();
   const popupRef = useRef<HTMLDivElement>(null);
-  const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0, maxHeight: 0, showAbove: false });
+  const [popupPosition, setPopupPosition] = useState({
+    top: 0,
+    left: 0,
+    maxHeight: 0,
+    showAbove: false,
+  });
 
   useLayoutEffect(() => {
     if (!isOpen || !anchorRef.current) return;
-    
+
     const updatePosition = () => {
       if (!anchorRef.current) return;
-      
+
       const rect = anchorRef.current.getBoundingClientRect();
       const viewportHeight = window.innerHeight;
       const viewportWidth = window.innerWidth;
-      
+
       const spaceAbove = rect.top;
       const spaceBelow = viewportHeight - rect.bottom;
       const showAbove = spaceAbove > spaceBelow && spaceAbove >= 300;
@@ -48,17 +53,17 @@ export default function ToolsPopup({
 
       const left = Math.min(
         rect.left,
-        viewportWidth - Math.min(462, viewportWidth * 0.95) - 10
+        viewportWidth - Math.min(462, viewportWidth * 0.95) - 10,
       );
-      
+
       setPopupPosition({
         top: showAbove ? rect.top - 8 : rect.bottom + 8,
         left,
         maxHeight: Math.min(600, maxHeight),
-        showAbove
+        showAbove,
       });
     };
-    
+
     updatePosition();
     window.addEventListener('resize', updatePosition);
     return () => window.removeEventListener('resize', updatePosition);
@@ -125,16 +130,18 @@ export default function ToolsPopup({
   if (!isOpen) return null;
 
   const filteredTools = userTools.filter((tool) =>
-    tool.displayName.toLowerCase().includes(searchTerm.toLowerCase())
+    tool.displayName.toLowerCase().includes(searchTerm.toLowerCase()),
   );
 
   return (
     <div
       ref={popupRef}
-      className="fixed z-[9999] rounded-lg border border-light-silver dark:border-dim-gray bg-lotion dark:bg-charleston-green-2 shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
+      className="fixed z-[9999] rounded-lg border border-light-silver bg-lotion shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033] dark:border-dim-gray dark:bg-charleston-green-2"
       style={{
         top: popupPosition.showAbove ? popupPosition.top : undefined,
-        bottom: popupPosition.showAbove ? undefined : window.innerHeight - popupPosition.top,
+        bottom: popupPosition.showAbove
+          ? undefined
+          : window.innerHeight - popupPosition.top,
         left: popupPosition.left,
         maxWidth: Math.min(462, window.innerWidth * 0.95),
         width: '100%',
@@ -142,9 +149,9 @@ export default function ToolsPopup({
         transform: popupPosition.showAbove ? 'translateY(-100%)' : 'none',
       }}
     >
-      <div className="flex flex-col h-full">
-        <div className="p-4 flex-shrink-0">
-          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
+      <div className="flex h-full flex-col">
+        <div className="flex-shrink-0 p-4">
+          <h3 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
             {t('settings.tools.label')}
           </h3>
 
@@ -162,20 +169,20 @@ export default function ToolsPopup({
         </div>
 
         {loading ? (
-          <div className="flex justify-center py-4 flex-grow">
-            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900 dark:border-white"></div>
+          <div className="flex flex-grow justify-center py-4">
+            <div className="h-6 w-6 animate-spin rounded-full border-b-2 border-gray-900 dark:border-white"></div>
           </div>
         ) : (
-          <div className="mx-4 border border-[#D9D9D9] dark:border-dim-gray rounded-md overflow-hidden flex-grow">
+          <div className="mx-4 flex-grow overflow-hidden rounded-md border border-[#D9D9D9] dark:border-dim-gray">
             <div className="h-full overflow-y-auto [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
               {filteredTools.length === 0 ? (
-                <div className="flex flex-col items-center justify-center h-full py-8">
+                <div className="flex h-full flex-col items-center justify-center py-8">
                   <img
                     src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
                     alt="No tools found"
-                    className="h-24 w-24 mx-auto mb-4"
+                    className="mx-auto mb-4 h-24 w-24"
                   />
-                  <p className="text-gray-500 dark:text-gray-400 text-center">
+                  <p className="text-center text-gray-500 dark:text-gray-400">
                     {t('settings.tools.noToolsFound')}
                   </p>
                 </div>
@@ -184,22 +191,24 @@ export default function ToolsPopup({
                   <div
                     key={tool.id}
                     onClick={() => updateToolStatus(tool.id, !tool.status)}
-                    className="flex items-center justify-between p-3 border-b border-[#D9D9D9] dark:border-dim-gray hover:bg-gray-100 dark:hover:bg-charleston-green-3"
+                    className="flex items-center justify-between border-b border-[#D9D9D9] p-3 hover:bg-gray-100 dark:border-dim-gray dark:hover:bg-charleston-green-3"
                   >
-                    <div className="flex items-center flex-grow mr-3">
+                    <div className="mr-3 flex flex-grow items-center">
                       <img
                         src={`/toolIcons/tool_${tool.name}.svg`}
                         alt={`${tool.displayName} icon`}
-                        className="h-5 w-5 mr-4 flex-shrink-0"
+                        className="mr-4 h-5 w-5 flex-shrink-0"
                       />
                       <div className="overflow-hidden">
-                        <p className="text-xs font-medium text-gray-900 dark:text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+                        <p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-xs font-medium text-gray-900 dark:text-white">
                           {tool.displayName}
                         </p>
                       </div>
                     </div>
-                    <div className="flex items-center flex-shrink-0">
-                      <div className={`w-4 h-4 border flex items-center justify-center p-[0.5px] dark:border-[#757783] border-[#C6C6C6]`}>
+                    <div className="flex flex-shrink-0 items-center">
+                      <div
+                        className={`flex h-4 w-4 items-center justify-center border border-[#C6C6C6] p-[0.5px] dark:border-[#757783]`}
+                      >
                         {tool.status && (
                           <img
                             src={CheckmarkIcon}
@@ -217,10 +226,10 @@ export default function ToolsPopup({
           </div>
         )}
 
-        <div className="p-4 flex-shrink-0 opacity-75 hover:opacity-100 transition-opacity duration-200">
+        <div className="flex-shrink-0 p-4 opacity-75 transition-opacity duration-200 hover:opacity-100">
           <a
             href="/settings/tools"
-            className="text-base text-purple-30 font-medium inline-flex items-center"
+            className="inline-flex items-center text-base font-medium text-purple-30"
           >
             {t('settings.tools.manageTools')}
             <img
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 457308ec..1f9ceccc 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -5,7 +5,10 @@ import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import { useSelector } from 'react-redux';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneLight, vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import {
+  oneLight,
+  vscDarkPlus,
+} from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
@@ -26,7 +29,10 @@ import CopyButton from '../components/CopyButton';
 import Sidebar from '../components/Sidebar';
 import SpeakButton from '../components/TextToSpeechButton';
 import { useDarkTheme, useOutsideAlerter } from '../hooks';
-import { selectChunks, selectSelectedDocs } from '../preferences/preferenceSlice';
+import {
+  selectChunks,
+  selectSelectedDocs,
+} from '../preferences/preferenceSlice';
 import classes from './ConversationBubble.module.css';
 import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
 import { ToolCallsType } from './types';
@@ -106,19 +112,19 @@ const ConversationBubble = forwardRef<
         >
           <Avatar
             size="SMALL"
-            className="mt-2 text-2xl flex-shrink-0"
+            className="mt-2 flex-shrink-0 text-2xl"
             avatar={
-              <img className="rounded-full mr-1" width={30} src={UserIcon} />
+              <img className="mr-1 rounded-full" width={30} src={UserIcon} />
             }
           />
           {!isEditClicked && (
             <>
-              <div className="flex flex-col mr-2">
+              <div className="mr-2 flex flex-col">
                 <div
                   style={{
                     wordBreak: 'break-word',
                   }}
-                  className="text-sm sm:text-base ml-2 mr-2 flex items-center rounded-[28px] bg-gradient-to-b from-medium-purple to-slate-blue py-[14px] px-[19px] text-white max-w-full whitespace-pre-wrap leading-normal"
+                  className="ml-2 mr-2 flex max-w-full items-center whitespace-pre-wrap rounded-[28px] bg-gradient-to-b from-medium-purple to-slate-blue px-[19px] py-[14px] text-sm leading-normal text-white sm:text-base"
                 >
                   {message}
                 </div>
@@ -128,7 +134,7 @@ const ConversationBubble = forwardRef<
                   setIsEditClicked(true);
                   setEditInputBox(message ?? '');
                 }}
-                className={`flex-shrink-0 h-fit mt-3 p-2 cursor-pointer rounded-full hover:bg-light-silver dark:hover:bg-[#35363B] flex items-center ${isQuestionHovered || isEditClicked ? 'visible' : 'invisible'}`}
+                className={`mt-3 flex h-fit flex-shrink-0 cursor-pointer items-center rounded-full p-2 hover:bg-light-silver dark:hover:bg-[#35363B] ${isQuestionHovered || isEditClicked ? 'visible' : 'invisible'}`}
               >
                 <img src={Edit} alt="Edit" className="cursor-pointer" />
               </button>
@@ -137,7 +143,7 @@ const ConversationBubble = forwardRef<
           {isEditClicked && (
             <div
               ref={editableQueryRef}
-              className="w-full mx-auto bg-transparent p-4 rounded-lg flex flex-col gap-4"
+              className="mx-auto flex w-full flex-col gap-4 rounded-lg bg-transparent p-4"
             >
               <textarea
                 placeholder={t('conversation.edit.placeholder')}
@@ -152,17 +158,17 @@ const ConversationBubble = forwardRef<
                 }}
                 rows={5}
                 value={editInputBox}
-                className="w-full resize-none border border-silver dark:border-philippine-grey rounded-3xl px-4 py-3 text-base leading-relaxed text-carbon dark:text-chinese-white dark:bg-raisin-black focus:outline-none"
+                className="w-full resize-none rounded-3xl border border-silver px-4 py-3 text-base leading-relaxed text-carbon focus:outline-none dark:border-philippine-grey dark:bg-raisin-black dark:text-chinese-white"
               />
               <div className="flex items-center justify-end gap-2">
                 <button
-                  className="px-4 py-2 text-purple-30 text-sm font-semibold hover:text-chinese-black-2 dark:hover:text-[#B9BCBE] hover:bg-gainsboro dark:hover:bg-onyx-2 transition-colors rounded-full"
+                  className="rounded-full px-4 py-2 text-sm font-semibold text-purple-30 transition-colors hover:bg-gainsboro hover:text-chinese-black-2 dark:hover:bg-onyx-2 dark:hover:text-[#B9BCBE]"
                   onClick={() => setIsEditClicked(false)}
                 >
                   {t('conversation.edit.cancel')}
                 </button>
                 <button
-                  className="rounded-full bg-purple-30 hover:bg-violets-are-blue dark:hover:bg-royal-purple px-4 py-2 text-white text-sm font-medium transition-colors"
+                  className="rounded-full bg-purple-30 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-violets-are-blue dark:hover:bg-royal-purple"
                   onClick={handleEditClick}
                 >
                   {t('conversation.edit.update')}
@@ -192,7 +198,10 @@ const ConversationBubble = forwardRef<
     const processMarkdownContent = (content: string) => {
       const processedContent = preprocessLaTeX(content);
 
-      const contentSegments: Array<{type: 'text' | 'mermaid', content: string}> = [];
+      const contentSegments: Array<{
+        type: 'text' | 'mermaid';
+        content: string;
+      }> = [];
 
       let lastIndex = 0;
       const regex = /```mermaid\n([\s\S]*?)```/g;
@@ -219,7 +228,7 @@ const ConversationBubble = forwardRef<
     bubble = (
       <div
         ref={ref}
-        className={`flex flex-wrap self-start ${className} group flex-col  dark:text-bright-gray`}
+        className={`flex flex-wrap self-start ${className} group flex-col dark:text-bright-gray`}
       >
         {DisableSourceFE ||
         type === 'ERROR' ||
@@ -378,9 +387,9 @@ const ConversationBubble = forwardRef<
               </p>
             </div>
             <div
-              className={`fade-in-bubble ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 py-[18px] px-7 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
+              className={`fade-in-bubble ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 px-7 py-[18px] dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
                 type === 'ERROR'
-                  ? 'relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
+                  ? 'relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000 dark:border-red-2000 dark:text-white'
                   : 'flex-col rounded-3xl'
               }`}
             >
@@ -397,25 +406,38 @@ const ConversationBubble = forwardRef<
                             rehypePlugins={[rehypeKatex]}
                             components={{
                               code(props) {
-                                const { children, className, node, ref, ...rest } = props;
-                                const match = /language-(\w+)/.exec(className || '');
+                                const {
+                                  children,
+                                  className,
+                                  node,
+                                  ref,
+                                  ...rest
+                                } = props;
+                                const match = /language-(\w+)/.exec(
+                                  className || '',
+                                );
                                 const language = match ? match[1] : '';
 
                                 return match ? (
-                                  <div className="group relative rounded-[14px] overflow-hidden border border-light-silver dark:border-raisin-black">
-                                    <div className="flex justify-between items-center px-2 py-1 bg-platinum dark:bg-eerie-black-2">
+                                  <div className="group relative overflow-hidden rounded-[14px] border border-light-silver dark:border-raisin-black">
+                                    <div className="flex items-center justify-between bg-platinum px-2 py-1 dark:bg-eerie-black-2">
                                       <span className="text-xs font-medium text-just-black dark:text-chinese-white">
                                         {language}
                                       </span>
                                       <CopyButton
-                                        textToCopy={String(children).replace(/\n$/, '')}
+                                        textToCopy={String(children).replace(
+                                          /\n$/,
+                                          '',
+                                        )}
                                       />
                                     </div>
                                     <SyntaxHighlighter
                                       {...rest}
                                       PreTag="div"
                                       language={language}
-                                      style={isDarkTheme ? vscDarkPlus : oneLight}
+                                      style={
+                                        isDarkTheme ? vscDarkPlus : oneLight
+                                      }
                                       className="!mt-0"
                                       customStyle={{
                                         margin: 0,
@@ -461,30 +483,37 @@ const ConversationBubble = forwardRef<
                               },
                               thead({ children }) {
                                 return (
-                                  <thead className="text-xs uppercase text-gray-900 dark:text-bright-gray bg-gray-50 dark:bg-[#26272E]/50">
+                                  <thead className="bg-gray-50 text-xs uppercase text-gray-900 dark:bg-[#26272E]/50 dark:text-bright-gray">
                                     {children}
                                   </thead>
                                 );
                               },
                               tr({ children }) {
                                 return (
-                                  <tr className="border-b border-gray-200 dark:border-silver/40 odd:bg-white dark:odd:bg-[#26272E] even:bg-gray-50 dark:even:bg-[#26272E]/50">
+                                  <tr className="border-b border-gray-200 odd:bg-white even:bg-gray-50 dark:border-silver/40 dark:odd:bg-[#26272E] dark:even:bg-[#26272E]/50">
                                     {children}
                                   </tr>
                                 );
                               },
                               th({ children }) {
-                                return <th className="px-6 py-3">{children}</th>;
+                                return (
+                                  <th className="px-6 py-3">{children}</th>
+                                );
                               },
                               td({ children }) {
-                                return <td className="px-6 py-3">{children}</td>;
+                                return (
+                                  <td className="px-6 py-3">{children}</td>
+                                );
                               },
                             }}
                           >
                             {segment.content}
                           </ReactMarkdown>
                         ) : (
-                          <div className="my-4 w-full" style={{ minWidth: '100%' }}>
+                          <div
+                            className="my-4 w-full"
+                            style={{ minWidth: '100%' }}
+                          >
                             <MermaidRenderer
                               code={segment.content}
                               isLoading={isStreaming}
@@ -502,16 +531,14 @@ const ConversationBubble = forwardRef<
         {message && (
           <div className="my-2 ml-2 flex justify-start">
             <div
-              className={`relative mr-2  block items-center justify-center lg:invisible
-            ${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
+              className={`relative mr-2 block items-center justify-center lg:invisible ${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
             >
               <div>
                 <CopyButton textToCopy={message} />
               </div>
             </div>
             <div
-              className={`relative mr-2 block items-center justify-center lg:invisible
-            ${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
+              className={`relative mr-2 block items-center justify-center lg:invisible ${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
             >
               <div>
                 <SpeakButton text={message} />
@@ -529,8 +556,7 @@ const ConversationBubble = forwardRef<
                     feedback === 'LIKE' || isLikeClicked
                       ? 'visible'
                       : 'lg:invisible'
-                  } ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''}
-  ${feedback === 'DISLIKE' && type !== 'ERROR' ? 'hidden' : ''}`}
+                  } ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''} ${feedback === 'DISLIKE' && type !== 'ERROR' ? 'hidden' : ''}`}
                 >
                   <div>
                     <div
@@ -541,12 +567,11 @@ const ConversationBubble = forwardRef<
                       }`}
                     >
                       <Like
-                        className={`cursor-pointer
-                  ${
-                    isLikeClicked || feedback === 'LIKE'
-                      ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
-                      : 'fill-none  stroke-gray-4000'
-                  }`}
+                        className={`cursor-pointer ${
+                          isLikeClicked || feedback === 'LIKE'
+                            ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
+                            : 'fill-none stroke-gray-4000'
+                        }`}
                         onClick={() => {
                           if (feedback === undefined || feedback === null) {
                             handleFeedback?.('LIKE');
@@ -570,8 +595,7 @@ const ConversationBubble = forwardRef<
                     feedback === 'DISLIKE' || isLikeClicked
                       ? 'visible'
                       : 'lg:invisible'
-                  } ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''}
-  ${feedback === 'LIKE' && type !== 'ERROR' ? 'hidden' : ''}`}
+                  } ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''} ${feedback === 'LIKE' && type !== 'ERROR' ? 'hidden' : ''}`}
                 >
                   <div>
                     <div
@@ -585,7 +609,7 @@ const ConversationBubble = forwardRef<
                         className={`cursor-pointer ${
                           isDislikeClicked || feedback === 'DISLIKE'
                             ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent'
-                            : 'fill-none  stroke-gray-4000'
+                            : 'fill-none stroke-gray-4000'
                         }`}
                         onClick={() => {
                           if (feedback === undefined || feedback === null) {
@@ -633,7 +657,7 @@ function AllSources(sources: AllSourcesProps) {
     <div className="h-full w-full">
       <div className="w-full">
         <p className="text-left text-xl">{`${sources.sources.length} Sources`}</p>
-        <div className="mx-1 mt-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40 lg:w-[95%] "></div>
+        <div className="mx-1 mt-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40 lg:w-[95%]"></div>
       </div>
       <div className="mt-6 flex h-[90%] w-60 flex-col items-center gap-4 overflow-y-auto sm:w-80">
         {sources.sources.map((source, index) => (
@@ -674,7 +698,7 @@ export default ConversationBubble;
 function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
   const [isToolCallsOpen, setIsToolCallsOpen] = useState(false);
   return (
-    <div className="mb-4 w-full flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
+    <div className="mb-4 flex w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
       <div className="my-2 flex flex-row items-center justify-center gap-3">
         <Avatar
           className="h-[26px] w-[30px] text-xl"
@@ -705,12 +729,12 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
               <Accordion
                 key={`tool-call-${index}`}
                 title={`${toolCall.tool_name}  -  ${toolCall.action_name.substring(0, toolCall.action_name.lastIndexOf('_'))}`}
-                className="w-full rounded-[20px] bg-gray-1000 dark:bg-gun-metal hover:bg-[#F1F1F1] dark:hover:bg-[#2C2E3C]"
+                className="w-full rounded-[20px] bg-gray-1000 hover:bg-[#F1F1F1] dark:bg-gun-metal dark:hover:bg-[#2C2E3C]"
                 titleClassName="px-6 py-2 text-sm font-semibold"
               >
                 <div className="flex flex-col gap-1">
-                  <div className="flex flex-col border border-silver dark:border-silver/20 rounded-2xl">
-                    <p className="flex flex-row items-center justify-between px-2 py-1 text-sm font-semibold bg-black/10 dark:bg-[#191919] rounded-t-2xl break-words">
+                  <div className="flex flex-col rounded-2xl border border-silver dark:border-silver/20">
+                    <p className="flex flex-row items-center justify-between break-words rounded-t-2xl bg-black/10 px-2 py-1 text-sm font-semibold dark:bg-[#191919]">
                       <span style={{ fontFamily: 'IBMPlexMono-Medium' }}>
                         Arguments
                       </span>{' '}
@@ -718,17 +742,17 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
                         textToCopy={JSON.stringify(toolCall.arguments, null, 2)}
                       />
                     </p>
-                    <p className="p-2 font-mono text-sm dark:tex dark:bg-[#222327] rounded-b-2xl break-words">
+                    <p className="dark:tex break-words rounded-b-2xl p-2 font-mono text-sm dark:bg-[#222327]">
                       <span
-                        className="text-black dark:text-gray-400 leading-[23px]"
+                        className="leading-[23px] text-black dark:text-gray-400"
                         style={{ fontFamily: 'IBMPlexMono-Medium' }}
                       >
                         {JSON.stringify(toolCall.arguments, null, 2)}
                       </span>
                     </p>
                   </div>
-                  <div className="flex flex-col border border-silver dark:border-silver/20 rounded-2xl">
-                    <p className="flex flex-row items-center justify-between px-2 py-1 text-sm font-semibold bg-black/10 dark:bg-[#191919] rounded-t-2xl break-words">
+                  <div className="flex flex-col rounded-2xl border border-silver dark:border-silver/20">
+                    <p className="flex flex-row items-center justify-between break-words rounded-t-2xl bg-black/10 px-2 py-1 text-sm font-semibold dark:bg-[#191919]">
                       <span style={{ fontFamily: 'IBMPlexMono-Medium' }}>
                         Response
                       </span>{' '}
@@ -736,9 +760,9 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
                         textToCopy={JSON.stringify(toolCall.result, null, 2)}
                       />
                     </p>
-                    <p className="p-2 font-mono text-sm dark:tex dark:bg-[#222327] rounded-b-2xl break-words">
+                    <p className="dark:tex break-words rounded-b-2xl p-2 font-mono text-sm dark:bg-[#222327]">
                       <span
-                        className="text-black dark:text-gray-400 leading-[23px]"
+                        className="leading-[23px] text-black dark:text-gray-400"
                         style={{ fontFamily: 'IBMPlexMono-Medium' }}
                       >
                         {JSON.stringify(toolCall.result, null, 2)}
@@ -766,7 +790,7 @@ function Thought({
   const [isThoughtOpen, setIsThoughtOpen] = useState(true);
 
   return (
-    <div className="mb-4 w-full flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
+    <div className="mb-4 flex w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
       <div className="my-2 flex flex-row items-center justify-center gap-3">
         <Avatar
           className="h-[26px] w-[30px] text-xl"
@@ -792,7 +816,7 @@ function Thought({
       </div>
       {isThoughtOpen && (
         <div className="fade-in ml-2 mr-5 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
-          <div className="rounded-[28px] bg-gray-1000 py-[18px] px-7 dark:bg-gun-metal">
+          <div className="rounded-[28px] bg-gray-1000 px-7 py-[18px] dark:bg-gun-metal">
             <ReactMarkdown
               className="fade-in whitespace-pre-wrap break-words leading-normal"
               remarkPlugins={[remarkGfm, remarkMath]}
@@ -804,8 +828,8 @@ function Thought({
                   const language = match ? match[1] : '';
 
                   return match ? (
-                    <div className="group relative rounded-[14px] overflow-hidden border border-light-silver dark:border-raisin-black">
-                      <div className="flex justify-between items-center px-2 py-1 bg-platinum dark:bg-eerie-black-2">
+                    <div className="group relative overflow-hidden rounded-[14px] border border-light-silver dark:border-raisin-black">
+                      <div className="flex items-center justify-between bg-platinum px-2 py-1 dark:bg-eerie-black-2">
                         <span className="text-xs font-medium text-just-black dark:text-chinese-white">
                           {language}
                         </span>
@@ -859,14 +883,14 @@ function Thought({
                 },
                 thead({ children }) {
                   return (
-                    <thead className="text-xs uppercase text-gray-900 dark:text-bright-gray bg-gray-50 dark:bg-[#26272E]/50">
+                    <thead className="bg-gray-50 text-xs uppercase text-gray-900 dark:bg-[#26272E]/50 dark:text-bright-gray">
                       {children}
                     </thead>
                   );
                 },
                 tr({ children }) {
                   return (
-                    <tr className="border-b border-gray-200 dark:border-silver/40 odd:bg-white dark:odd:bg-[#26272E] even:bg-gray-50 dark:even:bg-[#26272E]/50">
+                    <tr className="border-b border-gray-200 odd:bg-white even:bg-gray-50 dark:border-silver/40 dark:odd:bg-[#26272E] dark:even:bg-[#26272E]/50">
                       {children}
                     </tr>
                   );
diff --git a/frontend/src/conversation/ConversationMessages.tsx b/frontend/src/conversation/ConversationMessages.tsx
index 52162658..da36516a 100644
--- a/frontend/src/conversation/ConversationMessages.tsx
+++ b/frontend/src/conversation/ConversationMessages.tsx
@@ -38,7 +38,7 @@ export default function ConversationMessages({
   const { t } = useTranslation();
 
   const conversationRef = useRef<HTMLDivElement>(null);
-  const [atLast,setAtLast] = useState(true);
+  const [atLast, setAtLast] = useState(true);
   const [eventInterrupt, setEventInterrupt] = useState(false);
 
   const handleUserInterruption = () => {
@@ -47,7 +47,6 @@ export default function ConversationMessages({
     }
   };
 
-
   const scrollIntoView = () => {
     if (!conversationRef?.current || eventInterrupt) return;
 
@@ -60,7 +59,8 @@ export default function ConversationMessages({
           top: conversationRef.current.scrollHeight,
         });
       } else {
-        conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
+        conversationRef.current.scrollTop =
+          conversationRef.current.scrollHeight;
       }
     });
   };
@@ -92,7 +92,8 @@ export default function ConversationMessages({
   const prepResponseView = (query: Query, index: number) => {
     let responseView;
     if (query.thought || query.response) {
-      const isCurrentlyStreaming = status === 'loading' && index === queries.length - 1;
+      const isCurrentlyStreaming =
+        status === 'loading' && index === queries.length - 1;
       responseView = (
         <ConversationBubble
           className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
@@ -114,7 +115,7 @@ export default function ConversationMessages({
     } else if (query.error) {
       const retryBtn = (
         <button
-          className="flex items-center justify-center gap-3 self-center rounded-full py-3 px-5 text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray"
+          className="flex items-center justify-center gap-3 self-center rounded-full px-5 py-3 text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray"
           disabled={status === 'loading'}
           onClick={() => {
             handleQuestion({
@@ -150,7 +151,7 @@ export default function ConversationMessages({
       ref={conversationRef}
       onWheel={handleUserInterruption}
       onTouchMove={handleUserInterruption}
-      className="flex justify-center w-full overflow-y-auto h-full sm:pt-12 will-change-scroll"
+      className="flex h-full w-full justify-center overflow-y-auto will-change-scroll sm:pt-12"
     >
       {queries.length > 0 && !atLast && (
         <button
@@ -161,12 +162,12 @@ export default function ConversationMessages({
           <img
             src={ArrowDown}
             alt="arrow down"
-            className="h-4 w-4 opacity-50 md:h-5 md:w-5 filter dark:invert"
+            className="h-4 w-4 opacity-50 filter dark:invert md:h-5 md:w-5"
           />
         </button>
       )}
 
-      <div className="w-full md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12 max-w-[1300px] px-2">
+      <div className="w-full max-w-[1300px] px-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
         {queries.length > 0 ? (
           queries.map((query, index) => (
             <Fragment key={index}>
diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx
index da98f1b0..5a272da3 100644
--- a/frontend/src/conversation/ConversationTile.tsx
+++ b/frontend/src/conversation/ConversationTile.tsx
@@ -192,7 +192,7 @@ export default function ConversationTile({
           conversationId !== conversation.id &&
             selectConversation(conversation.id);
         }}
-        className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between pl-4 gap-4 rounded-3xl hover:bg-bright-gray dark:hover:bg-dark-charcoal ${
+        className={`mx-4 my-auto mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl pl-4 hover:bg-bright-gray dark:hover:bg-dark-charcoal ${
           conversationId === conversation.id || isOpen || isHovered || isEdit
             ? 'bg-bright-gray dark:bg-dark-charcoal'
             : ''
diff --git a/frontend/src/conversation/SharedConversation.tsx b/frontend/src/conversation/SharedConversation.tsx
index be822805..ba146762 100644
--- a/frontend/src/conversation/SharedConversation.tsx
+++ b/frontend/src/conversation/SharedConversation.tsx
@@ -132,8 +132,8 @@ export const SharedConversation = () => {
           content="Shared conversations with DocsGPT"
         />
       </Helmet>
-      <div className="flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden dark:bg-raisin-black ">
-        <div className="border-b p-2 dark:border-b-silver w-full md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12 max-w-[1200px]">
+      <div className="flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden dark:bg-raisin-black">
+        <div className="w-full max-w-[1200px] border-b p-2 dark:border-b-silver md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
           <h1 className="font-semi-bold text-4xl text-chinese-black dark:text-chinese-silver">
             {title}
           </h1>
@@ -153,7 +153,7 @@ export const SharedConversation = () => {
           queries={queries}
           status={status}
         />
-        <div className="flex flex-col items-center gap-4 pb-2 w-full md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12 max-w-[1200px]">
+        <div className="flex w-full max-w-[1200px] flex-col items-center gap-4 pb-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
           {apiKey ? (
             <MessageInput
               value={input}
@@ -164,13 +164,13 @@ export const SharedConversation = () => {
           ) : (
             <button
               onClick={() => navigate('/')}
-              className="w-fit rounded-full bg-purple-30 py-3 px-5 text-white shadow-xl transition-colors duration-200 hover:bg-violets-are-blue mb-14 sm:mb-0"
+              className="mb-14 w-fit rounded-full bg-purple-30 px-5 py-3 text-white shadow-xl transition-colors duration-200 hover:bg-violets-are-blue sm:mb-0"
             >
               {t('sharedConv.button')}
             </button>
           )}
 
-          <p className="text-gray-4000 hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs dark:text-sonic-silver md:inline md:w-full">
+          <p className="hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs text-gray-4000 dark:text-sonic-silver md:inline md:w-full">
             {t('sharedConv.meta')}
           </p>
         </div>
diff --git a/frontend/src/conversation/conversationHandlers.ts b/frontend/src/conversation/conversationHandlers.ts
index 2fcb2e28..398f74db 100644
--- a/frontend/src/conversation/conversationHandlers.ts
+++ b/frontend/src/conversation/conversationHandlers.ts
@@ -15,7 +15,7 @@ export function handleFetchAnswer(
   token_limit: number,
   agentId?: string,
   attachments?: string[],
-  save_conversation: boolean = true,
+  save_conversation = true,
 ): Promise<
   | {
       result: any;
@@ -103,7 +103,7 @@ export function handleFetchAnswerSteaming(
   indx?: number,
   agentId?: string,
   attachments?: string[],
-  save_conversation: boolean = true,
+  save_conversation = true,
 ): Promise<Answer> {
   history = history.map((item) => {
     return {
diff --git a/frontend/src/conversation/conversationModels.ts b/frontend/src/conversation/conversationModels.ts
index 1808d84a..734e1992 100644
--- a/frontend/src/conversation/conversationModels.ts
+++ b/frontend/src/conversation/conversationModels.ts
@@ -9,7 +9,6 @@ export interface Message {
   type: MESSAGE_TYPE;
 }
 
-
 export interface Attachment {
   id?: string;
   fileName: string;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 07760385..4c1bb30f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -50,11 +50,11 @@ body.dark {
 
 @layer components {
   .table-default {
-    @apply block w-full table-auto justify-center rounded-xl border border-silver dark:border-silver/40 text-center dark:text-bright-gray overflow-auto;
+    @apply block w-full table-auto justify-center overflow-auto rounded-xl border border-silver text-center dark:border-silver/40 dark:text-bright-gray;
   }
 
   .table-default th {
-    @apply p-4  font-normal text-gray-400 text-nowrap;
+    @apply text-nowrap p-4 font-normal text-gray-400;
   }
 
   .table-default th {
@@ -66,7 +66,7 @@ body.dark {
   }
 
   .table-default td {
-    @apply border-t w-full border-silver dark:border-silver/40 px-4 py-2;
+    @apply w-full border-t border-silver px-4 py-2 dark:border-silver/40;
   }
 
   .table-default td:last-child {
diff --git a/frontend/src/modals/AddActionModal.tsx b/frontend/src/modals/AddActionModal.tsx
index 5db46558..3cb35849 100644
--- a/frontend/src/modals/AddActionModal.tsx
+++ b/frontend/src/modals/AddActionModal.tsx
@@ -43,11 +43,11 @@ export default function AddActionModal({
       className="sm:w-[512px]"
     >
       <div>
-        <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
+        <h2 className="px-3 text-xl font-semibold text-jet dark:text-bright-gray">
           New Action
         </h2>
-        <div className="mt-6 relative px-3">
-          <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
+        <div className="relative mt-6 px-3">
+          <span className="absolute -top-2 left-5 z-10 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
             Action Name
           </span>
           <Input
@@ -63,7 +63,7 @@ export default function AddActionModal({
             placeholder={'Enter name'}
           />
           <p
-            className={`mt-2 ml-1 text-xs italic ${
+            className={`ml-1 mt-2 text-xs italic ${
               functionNameError ? 'text-red-500' : 'text-gray-500'
             }`}
           >
diff --git a/frontend/src/modals/AddToolModal.tsx b/frontend/src/modals/AddToolModal.tsx
index 9885edab..a12950a2 100644
--- a/frontend/src/modals/AddToolModal.tsx
+++ b/frontend/src/modals/AddToolModal.tsx
@@ -100,26 +100,26 @@ export default function AddToolModal({
       {modalState === 'ACTIVE' && (
         <WrapperComponent
           close={() => setModalState('INACTIVE')}
-          className="max-w-[950px] w-[90vw] md:w-[85vw] lg:w-[75vw] h-[85vh]"
+          className="h-[85vh] w-[90vw] max-w-[950px] md:w-[85vw] lg:w-[75vw]"
         >
-          <div className="flex flex-col h-full">
+          <div className="flex h-full flex-col">
             <div>
-              <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
+              <h2 className="px-3 text-xl font-semibold text-jet dark:text-bright-gray">
                 {t('settings.tools.selectToolSetup')}
               </h2>
               <div className="mt-5 h-[73vh] overflow-auto px-3 py-px">
                 {loading ? (
-                  <div className="h-full flex items-center justify-center">
+                  <div className="flex h-full items-center justify-center">
                     <Spinner />
                   </div>
                 ) : (
-                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-fr pb-2">
+                  <div className="grid auto-rows-fr grid-cols-1 gap-4 pb-2 sm:grid-cols-2 lg:grid-cols-3">
                     {availableTools.map((tool, index) => (
                       <div
                         role="button"
                         tabIndex={0}
                         key={index}
-                        className="h-52 w-full p-6 border rounded-2xl border-light-gainsboro dark:border-arsenic bg-white-3000 dark:bg-gunmetal flex flex-col justify-between cursor-pointer hover:border-[#9d9d9d] hover:dark:border-[#717179]"
+                        className="flex h-52 w-full cursor-pointer flex-col justify-between rounded-2xl border border-light-gainsboro bg-white-3000 p-6 hover:border-[#9d9d9d] dark:border-arsenic dark:bg-gunmetal hover:dark:border-[#717179]"
                         onClick={() => {
                           setSelectedTool(tool);
                           handleAddTool(tool);
@@ -132,7 +132,7 @@ export default function AddToolModal({
                         }}
                       >
                         <div className="w-full">
-                          <div className="px-1 w-full flex items-center justify-between">
+                          <div className="flex w-full items-center justify-between px-1">
                             <img
                               src={`/toolIcons/tool_${tool.name}.svg`}
                               className="h-6 w-6"
@@ -142,11 +142,11 @@ export default function AddToolModal({
                           <div className="mt-[9px]">
                             <p
                               title={tool.displayName}
-                              className="px-1 text-[13px] font-semibold text-raisin-black-light dark:text-bright-gray leading-relaxed capitalize truncate"
+                              className="truncate px-1 text-[13px] font-semibold capitalize leading-relaxed text-raisin-black-light dark:text-bright-gray"
                             >
                               {tool.displayName}
                             </p>
-                            <p className="mt-1 px-1 h-24 overflow-auto text-[12px] text-old-silver dark:text-sonic-silver-light leading-relaxed">
+                            <p className="mt-1 h-24 overflow-auto px-1 text-[12px] leading-relaxed text-old-silver dark:text-sonic-silver-light">
                               {tool.description}
                             </p>
                           </div>
diff --git a/frontend/src/modals/ChunkModal.tsx b/frontend/src/modals/ChunkModal.tsx
index 4ef169d7..ab51fdee 100644
--- a/frontend/src/modals/ChunkModal.tsx
+++ b/frontend/src/modals/ChunkModal.tsx
@@ -35,12 +35,12 @@ export default function ChunkModal({
       <div
         className={`${
           modalState === 'ACTIVE' ? 'visible' : 'hidden'
-        } fixed top-0 left-0 z-30  h-screen w-screen  bg-gray-alpha flex items-center justify-center`}
+        } fixed left-0 top-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha`}
       >
-        <article className="flex w-11/12 sm:w-[620px] flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-[#26272E]">
+        <article className="flex w-11/12 flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-[#26272E] sm:w-[620px]">
           <div className="relative">
             <button
-              className="absolute top-3 right-4 m-2 w-3"
+              className="absolute right-4 top-3 m-2 w-3"
               onClick={() => {
                 setModalState('INACTIVE');
               }}
@@ -48,11 +48,11 @@ export default function ChunkModal({
               <img className="filter dark:invert" src={Exit} />
             </button>
             <div className="p-6">
-              <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
+              <h2 className="px-3 text-xl font-semibold text-jet dark:text-bright-gray">
                 Add Chunk
               </h2>
-              <div className="mt-6 relative px-3">
-                <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
+              <div className="relative mt-6 px-3">
+                <span className="absolute -top-2 left-5 z-10 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
                   Title
                 </span>
                 <Input
@@ -64,14 +64,14 @@ export default function ChunkModal({
                   labelBgClassName="bg-white dark:bg-charleston-green-2"
                 ></Input>
               </div>
-              <div className="mt-6 relative px-3">
-                <div className="pt-3 pb-1 border border-silver dark:border-silver/40 rounded-lg">
-                  <span className="absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver rounded-lg">
+              <div className="relative mt-6 px-3">
+                <div className="rounded-lg border border-silver pb-1 pt-3 dark:border-silver/40">
+                  <span className="absolute -top-2 left-5 rounded-lg bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
                     Body text
                   </span>
                   <textarea
                     id="chunk-body-text"
-                    className="h-60 w-full px-3 outline-none  dark:bg-transparent dark:text-white"
+                    className="h-60 w-full px-3 outline-none dark:bg-transparent dark:text-white"
                     value={chunkText}
                     onChange={(e) => setChunkText(e.target.value)}
                     aria-label="Prompt Text"
@@ -107,12 +107,12 @@ export default function ChunkModal({
       <div
         className={`${
           modalState === 'ACTIVE' ? 'visible' : 'hidden'
-        } fixed top-0 left-0 z-30  h-screen w-screen  bg-gray-alpha flex items-center justify-center`}
+        } fixed left-0 top-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha`}
       >
-        <article className="flex w-11/12 sm:w-[620px] flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-[#26272E]">
+        <article className="flex w-11/12 flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-[#26272E] sm:w-[620px]">
           <div className="relative">
             <button
-              className="absolute top-3 right-4 m-2 w-3"
+              className="absolute right-4 top-3 m-2 w-3"
               onClick={() => {
                 setModalState('INACTIVE');
               }}
@@ -120,10 +120,10 @@ export default function ChunkModal({
               <img className="filter dark:invert" src={Exit} />
             </button>
             <div className="p-6">
-              <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
+              <h2 className="px-3 text-xl font-semibold text-jet dark:text-bright-gray">
                 Edit Chunk
               </h2>
-              <div className="mt-6 relative px-3">
+              <div className="relative mt-6 px-3">
                 <Input
                   type="text"
                   value={title}
@@ -133,23 +133,23 @@ export default function ChunkModal({
                   labelBgClassName="bg-white dark:bg-charleston-green-2"
                 ></Input>
               </div>
-              <div className="mt-6 relative px-3">
-                <div className="pt-3 pb-1 border border-silver dark:border-silver/40 rounded-lg">
-                  <span className="absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver rounded-lg">
+              <div className="relative mt-6 px-3">
+                <div className="rounded-lg border border-silver pb-1 pt-3 dark:border-silver/40">
+                  <span className="absolute -top-2 left-5 rounded-lg bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
                     Body text
                   </span>
                   <textarea
                     id="chunk-body-text"
-                    className="h-60 w-full px-3 outline-none  dark:bg-transparent dark:text-white"
+                    className="h-60 w-full px-3 outline-none dark:bg-transparent dark:text-white"
                     value={chunkText}
                     onChange={(e) => setChunkText(e.target.value)}
                     aria-label="Prompt Text"
                   ></textarea>
                 </div>
               </div>
-              <div className="mt-8 w-full px-3 flex items-center justify-between">
+              <div className="mt-8 flex w-full items-center justify-between px-3">
                 <button
-                  className="rounded-full px-5 py-2 border border-solid border-red-500 text-red-500 hover:bg-red-500 hover:text-white text-nowrap text-sm"
+                  className="text-nowrap rounded-full border border-solid border-red-500 px-5 py-2 text-sm text-red-500 hover:bg-red-500 hover:text-white"
                   onClick={() => {
                     setDeleteModal('ACTIVE');
                   }}
diff --git a/frontend/src/modals/ConfigToolModal.tsx b/frontend/src/modals/ConfigToolModal.tsx
index e631419a..4a183e0b 100644
--- a/frontend/src/modals/ConfigToolModal.tsx
+++ b/frontend/src/modals/ConfigToolModal.tsx
@@ -51,10 +51,10 @@ export default function ConfigToolModal({
   return (
     <WrapperModal close={() => setModalState('INACTIVE')}>
       <div>
-        <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
+        <h2 className="px-3 text-xl font-semibold text-jet dark:text-bright-gray">
           {t('modals.configTool.title')}
         </h2>
-        <p className="mt-5 text-sm text-gray-600 dark:text-gray-400 px-3">
+        <p className="mt-5 px-3 text-sm text-gray-600 dark:text-gray-400">
           {t('modals.configTool.type')}:{' '}
           <span className="font-semibold">{tool?.name}</span>
         </p>
diff --git a/frontend/src/modals/CreateAPIKeyModal.tsx b/frontend/src/modals/CreateAPIKeyModal.tsx
index 79e2120d..cb176e98 100644
--- a/frontend/src/modals/CreateAPIKeyModal.tsx
+++ b/frontend/src/modals/CreateAPIKeyModal.tsx
@@ -80,7 +80,7 @@ export default function CreateAPIKeyModal({
           {t('modals.createAPIKey.label')}
         </span>
       </div>
-      <div className="relative mt-5 mb-4">
+      <div className="relative mb-4 mt-5">
         <Input
           type="text"
           className="rounded-md"
diff --git a/frontend/src/modals/ShareConversationModal.tsx b/frontend/src/modals/ShareConversationModal.tsx
index 73bb5acd..99262f01 100644
--- a/frontend/src/modals/ShareConversationModal.tsx
+++ b/frontend/src/modals/ShareConversationModal.tsx
@@ -136,7 +136,7 @@ export const ShareConversationModal = ({
           </div>
         )}
         <div className="flex items-baseline justify-between gap-2">
-          <span className="no-scrollbar w-full overflow-x-auto whitespace-nowrap rounded-full border-2 border-silver dark:border-silver/40 py-3 px-4 text-eerie-black dark:text-white">
+          <span className="no-scrollbar w-full overflow-x-auto whitespace-nowrap rounded-full border-2 border-silver px-4 py-3 text-eerie-black dark:border-silver/40 dark:text-white">
             {`${domain}/share/${identifier ?? '....'}`}
           </span>
           {status === 'fetched' ? (
diff --git a/frontend/src/modals/WrapperModal.tsx b/frontend/src/modals/WrapperModal.tsx
index 6d5d8543..879696b8 100644
--- a/frontend/src/modals/WrapperModal.tsx
+++ b/frontend/src/modals/WrapperModal.tsx
@@ -46,14 +46,14 @@ export default function WrapperModal({
   }, [close]);
 
   return (
-    <div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
+    <div className="fixed left-0 top-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
       <div
         ref={modalRef}
-        className={`relative w-11/12 sm:w-[512px] p-8 rounded-2xl bg-white dark:bg-[#26272E] ${className}`}
+        className={`relative w-11/12 rounded-2xl bg-white p-8 dark:bg-[#26272E] sm:w-[512px] ${className}`}
       >
         {!isPerformingTask && (
           <button
-            className="absolute top-3 right-4 m-2 w-3 z-50"
+            className="absolute right-4 top-3 z-50 m-2 w-3"
             onClick={close}
           >
             <img className="filter dark:invert" src={Exit} alt="Close" />
diff --git a/frontend/src/preferences/PromptsModal.tsx b/frontend/src/preferences/PromptsModal.tsx
index 28f2dc5e..b5e028bd 100644
--- a/frontend/src/preferences/PromptsModal.tsx
+++ b/frontend/src/preferences/PromptsModal.tsx
@@ -41,7 +41,7 @@ function AddPrompt({
           labelBgClassName="bg-white dark:bg-[#26272E]"
           borderVariant="thin"
         />
-        <div className="relative top-[7px] left-3">
+        <div className="relative left-3 top-[7px]">
           <span className="bg-white px-1 text-xs text-silver dark:bg-[#26272E] dark:text-silver">
             {t('modals.prompts.promptText')}
           </span>
@@ -113,7 +113,7 @@ function EditPrompt({
             labelBgClassName="bg-white dark:bg-charleston-green-2"
             borderVariant="thin"
           />
-          <div className="relative top-[7px] left-3">
+          <div className="relative left-3 top-[7px]">
             <span className="bg-white px-1 text-xs text-silver dark:bg-charleston-green-2 dark:text-silver">
               {t('modals.prompts.promptText')}
             </span>
@@ -131,7 +131,7 @@ function EditPrompt({
         </div>
         <div className="mt-6 flex flex-row-reverse gap-4">
           <button
-            className={`rounded-3xl bg-purple-30 disabled:hover:bg-purple-30  hover:bg-violets-are-blue px-5 py-2 text-sm text-white transition-all ${
+            className={`rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-violets-are-blue disabled:hover:bg-purple-30 ${
               currentPromptEdit.type === 'public'
                 ? 'cursor-not-allowed opacity-50'
                 : ''
@@ -247,7 +247,7 @@ export default function PromptsModal({
           setNewPromptContent('');
         }
       }}
-      className="sm:w-[512px] mt-24"
+      className="mt-24 sm:w-[512px]"
     >
       {view}
     </WrapperModal>
diff --git a/frontend/src/settings/APIKeys.tsx b/frontend/src/settings/APIKeys.tsx
index 2da36c76..4e6192c7 100644
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -101,18 +101,18 @@ export default function APIKeys() {
   }, []);
 
   return (
-    <div className="flex flex-col w-full mt-8 max-w-full overflow-hidden">
-      <div className="flex flex-col relative flex-grow">
+    <div className="mt-8 flex w-full max-w-full flex-col overflow-hidden">
+      <div className="relative flex flex-grow flex-col">
         <div className="mb-6">
           <h2 className="text-base font-medium text-sonic-silver">
             {t('settings.apiKeys.description')}
           </h2>
         </div>
 
-        <div className="mb-6 flex flex-col sm:flex-row justify-end items-start sm:items-center gap-3">
+        <div className="mb-6 flex flex-col items-start justify-end gap-3 sm:flex-row sm:items-center">
           <button
             onClick={() => setCreateModal(true)}
-            className="rounded-full text-sm w-[108px] h-[30px] bg-purple-30 text-white hover:bg-violets-are-blue flex items-center justify-center"
+            className="flex h-[30px] w-[108px] items-center justify-center rounded-full bg-purple-30 text-sm text-white hover:bg-violets-are-blue"
             title={t('settings.apiKeys.createNew')}
           >
             {t('settings.apiKeys.createNew')}
@@ -120,18 +120,18 @@ export default function APIKeys() {
         </div>
 
         <div className="relative w-full">
-          <div className="border rounded-md border-gray-300 dark:border-silver/40 overflow-hidden">
-            <div className="overflow-x-auto table-scroll">
+          <div className="overflow-hidden rounded-md border border-gray-300 dark:border-silver/40">
+            <div className="table-scroll overflow-x-auto">
               <table className="w-full table-auto">
                 <thead>
                   <tr className="border-b border-gray-300 dark:border-silver/40">
-                    <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver w-[35%]">
+                    <th className="w-[35%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
                       {t('settings.apiKeys.name')}
                     </th>
-                    <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver w-[35%]">
+                    <th className="w-[35%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
                       {t('settings.apiKeys.sourceDoc')}
                     </th>
-                    <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver w-[25%]">
+                    <th className="w-[25%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
                       <span className="hidden sm:inline">
                         {t('settings.apiKeys.key')}
                       </span>
@@ -139,7 +139,7 @@ export default function APIKeys() {
                         {t('settings.apiKeys.key')}
                       </span>
                     </th>
-                    <th className="py-3 px-4 text-right text-xs font-medium text-gray-700 dark:text-[#E0E0E0] w-[5%]">
+                    <th className="w-[5%] px-4 py-3 text-right text-xs font-medium text-gray-700 dark:text-[#E0E0E0]">
                       <span className="sr-only">Actions</span>
                     </th>
                   </tr>
@@ -151,7 +151,7 @@ export default function APIKeys() {
                     <tr>
                       <td
                         colSpan={4}
-                        className="py-4 text-center text-gray-700 dark:text-neutral-200 bg-transparent"
+                        className="bg-transparent py-4 text-center text-gray-700 dark:text-neutral-200"
                       >
                         {t('settings.apiKeys.noData')}
                       </td>
@@ -163,22 +163,22 @@ export default function APIKeys() {
                         key={element.id}
                         className="group transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50"
                       >
-                        <td className="py-4 px-4 text-sm font-semibold text-gray-700 dark:text-[#E0E0E0] w-[35%] min-w-48 max-w-0">
+                        <td className="w-[35%] min-w-48 max-w-0 px-4 py-4 text-sm font-semibold text-gray-700 dark:text-[#E0E0E0]">
                           <div className="truncate" title={element.name}>
                             {element.name}
                           </div>
                         </td>
-                        <td className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[35%] min-w-48 max-w-0">
+                        <td className="w-[35%] min-w-48 max-w-0 px-4 py-4 text-sm text-gray-700 dark:text-[#E0E0E0]">
                           <div className="truncate" title={element.source}>
                             {element.source}
                           </div>
                         </td>
-                        <td className="py-4 px-4 text-sm font-mono text-gray-700 dark:text-[#E0E0E0] w-[25%]">
+                        <td className="w-[25%] px-4 py-4 font-mono text-sm text-gray-700 dark:text-[#E0E0E0]">
                           <div className="truncate" title={element.key}>
                             {element.key}
                           </div>
                         </td>
-                        <td className="py-4 px-4 text-right w-[5%]">
+                        <td className="w-[5%] px-4 py-4 text-right">
                           <div className="flex justify-end">
                             <button
                               onClick={() =>
@@ -187,7 +187,7 @@ export default function APIKeys() {
                                   name: element.name,
                                 })
                               }
-                              className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
+                              className="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
                             >
                               <img
                                 src={Trash}
diff --git a/frontend/src/settings/Analytics.tsx b/frontend/src/settings/Analytics.tsx
index 535200ef..7af228cd 100644
--- a/frontend/src/settings/Analytics.tsx
+++ b/frontend/src/settings/Analytics.tsx
@@ -1,12 +1,17 @@
 import {
-    BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  Title,
+  Tooltip,
 } from 'chart.js';
 import { useEffect, useState } from 'react';
 import { Bar } from 'react-chartjs-2';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import { Agent } from '../agents/types';
 import userService from '../api/services/userService';
 import Dropdown from '../components/Dropdown';
 import SkeletonLoader from '../components/SkeletonLoader';
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 0fc03f24..971e58d1 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -285,14 +285,14 @@ export default function Documents({
       }}
     />
   ) : (
-    <div className="flex flex-col mt-8 w-full max-w-full overflow-hidden">
-      <div className="flex flex-col relative flex-grow">
+    <div className="mt-8 flex w-full max-w-full flex-col overflow-hidden">
+      <div className="relative flex flex-grow flex-col">
         <div className="mb-6">
           <h2 className="text-base font-medium text-sonic-silver">
             {t('settings.documents.title')}
           </h2>
         </div>
-        <div className="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
+        <div className="mb-6 flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
           <div className="w-full sm:w-auto">
             <label htmlFor="document-search-input" className="sr-only">
               {t('settings.documents.searchPlaceholder')}
@@ -312,7 +312,7 @@ export default function Documents({
             />
           </div>
           <button
-            className="rounded-full w-[108px] h-[32px] text-sm bg-purple-30 text-white hover:bg-violets-are-blue flex items-center justify-center"
+            className="flex h-[32px] w-[108px] items-center justify-center rounded-full bg-purple-30 text-sm text-white hover:bg-violets-are-blue"
             title={t('settings.documents.addNew')}
             onClick={() => {
               setIsOnboarding(false);
@@ -323,27 +323,27 @@ export default function Documents({
           </button>
         </div>
         <div className="relative w-full">
-          <div className="border rounded-md border-gray-300 dark:border-silver/40 overflow-hidden">
-            <div className="overflow-x-auto table-scroll">
+          <div className="overflow-hidden rounded-md border border-gray-300 dark:border-silver/40">
+            <div className="table-scroll overflow-x-auto">
               <table className="w-full table-auto">
                 <thead>
                   <tr className="border-b border-gray-300 dark:border-silver/40">
-                    <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver w-[45%]">
+                    <th className="w-[45%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
                       {t('settings.documents.name')}
                     </th>
-                    <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver w-[30%]">
-                      <div className="flex justify-start items-center">
+                    <th className="w-[30%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
+                      <div className="flex items-center justify-start">
                         {t('settings.documents.date')}
                         <img
-                          className="cursor-pointer ml-2"
+                          className="ml-2 cursor-pointer"
                           onClick={() => refreshDocs('date')}
                           src={caretSort}
                           alt="sort"
                         />
                       </div>
                     </th>
-                    <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver w-[15%]">
-                      <div className="flex justify-start items-center">
+                    <th className="w-[15%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
+                      <div className="flex items-center justify-start">
                         <span className="hidden sm:inline">
                           {t('settings.documents.tokenUsage')}
                         </span>
@@ -351,14 +351,14 @@ export default function Documents({
                           {t('settings.documents.tokenUsage')}
                         </span>
                         <img
-                          className="cursor-pointer ml-2"
+                          className="ml-2 cursor-pointer"
                           onClick={() => refreshDocs('tokens')}
                           src={caretSort}
                           alt="sort"
                         />
                       </div>
                     </th>
-                    <th className="py-3 px-4 sr-only w-[10%]">
+                    <th className="sr-only w-[10%] px-4 py-3">
                       {t('settings.documents.actions')}
                     </th>
                   </tr>
@@ -370,7 +370,7 @@ export default function Documents({
                     <tr>
                       <td
                         colSpan={4}
-                        className="py-4 text-center text-gray-700 dark:text-neutral-200 bg-transparent"
+                        className="bg-transparent py-4 text-center text-gray-700 dark:text-neutral-200"
                       >
                         {t('settings.documents.noData')}
                       </td>
@@ -382,26 +382,26 @@ export default function Documents({
                       return (
                         <tr key={docId} className="group transition-colors">
                           <td
-                            className="py-4 px-4 text-sm font-semibold text-gray-700 dark:text-[#E0E0E0] min-w-48 max-w-0 truncate group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
+                            className="min-w-48 max-w-0 truncate px-4 py-4 text-sm font-semibold text-gray-700 group-hover:bg-gray-50 dark:text-[#E0E0E0] dark:group-hover:bg-gray-800/50"
                             title={document.name}
                           >
                             {document.name}
                           </td>
-                          <td className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
+                          <td className="whitespace-nowrap px-4 py-4 text-sm text-gray-700 group-hover:bg-gray-50 dark:text-[#E0E0E0] dark:group-hover:bg-gray-800/50">
                             {document.date ? formatDate(document.date) : ''}
                           </td>
-                          <td className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
+                          <td className="whitespace-nowrap px-4 py-4 text-sm text-gray-700 group-hover:bg-gray-50 dark:text-[#E0E0E0] dark:group-hover:bg-gray-800/50">
                             {document.tokens
                               ? formatTokens(+document.tokens)
                               : ''}
                           </td>
                           <td
-                            className="py-4 px-4 text-right group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
+                            className="px-4 py-4 text-right group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
                             onClick={(e) => e.stopPropagation()}
                           >
                             <div
                               ref={getMenuRef(docId)}
-                              className="flex items-center justify-end gap-3 relative"
+                              className="relative flex items-center justify-end gap-3"
                             >
                               {document.syncFrequency && (
                                 <DropdownMenu
@@ -432,7 +432,7 @@ export default function Documents({
                               )}
                               <button
                                 onClick={(e) => handleMenuClick(e, docId)}
-                                className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
+                                className="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
                                 aria-label="Open menu"
                                 data-testid={`menu-button-${docId}`}
                               >
@@ -633,19 +633,19 @@ function DocumentChunks({
     fetchChunks();
   }, [page, perPage]);
   return (
-    <div className="flex flex-col mt-8">
-      <div className="mb-3 flex items-center gap-3 text-eerie-black dark:text-bright-gray text-sm">
+    <div className="mt-8 flex flex-col">
+      <div className="mb-3 flex items-center gap-3 text-sm text-eerie-black dark:text-bright-gray">
         <button
-          className="text-sm text-gray-400 dark:text-gray-500 border dark:border-0 dark:bg-[#28292D] dark:hover:bg-[#2E2F34] p-3 rounded-full"
+          className="rounded-full border p-3 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
           onClick={handleGoBack}
         >
-          <img src={ArrowLeft} alt="left-arrow" className="w-3 h-3" />
+          <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
         </button>
         <p className="mt-px">Back to all documents</p>
       </div>
-      <div className="my-3 flex justify-between items-center gap-1">
-        <div className="w-full sm:w-auto flex items-center gap-2 text-eerie-black dark:text-bright-gray">
-          <p className="font-semibold text-2xl hidden sm:flex">{`${totalChunks} Chunks`}</p>
+      <div className="my-3 flex items-center justify-between gap-1">
+        <div className="flex w-full items-center gap-2 text-eerie-black dark:text-bright-gray sm:w-auto">
+          <p className="hidden text-2xl font-semibold sm:flex">{`${totalChunks} Chunks`}</p>
           <label htmlFor="chunk-search-input" className="sr-only">
             {t('settings.documents.searchPlaceholder')}
           </label>
@@ -663,7 +663,7 @@ function DocumentChunks({
           />
         </div>
         <button
-          className="rounded-full w-[108px] h-[32px] text-sm bg-purple-30 text-white hover:bg-violets-are-blue flex items-center justify-center"
+          className="flex h-[32px] w-[108px] items-center justify-center rounded-full bg-purple-30 text-sm text-white hover:bg-violets-are-blue"
           title={t('settings.documents.addNew')}
           onClick={() => setAddModal('ACTIVE')}
         >
@@ -671,24 +671,24 @@ function DocumentChunks({
         </button>
       </div>
       {loading ? (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-          <div className="h-32 flex items-center justify-center mt-24 col-span-2 lg:col-span-3">
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          <div className="col-span-2 mt-24 flex h-32 items-center justify-center lg:col-span-3">
             <Spinner />
           </div>
         </div>
       ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
           {paginatedChunks.filter((chunk) => {
             if (!chunk.metadata?.title) return true;
             return chunk.metadata.title
               .toLowerCase()
               .includes(searchTerm.toLowerCase());
           }).length === 0 ? (
-            <div className="mt-24 col-span-2 lg:col-span-3 text-center text-gray-500 dark:text-gray-400">
+            <div className="col-span-2 mt-24 text-center text-gray-500 dark:text-gray-400 lg:col-span-3">
               <img
                 src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
                 alt="No tools found"
-                className="h-24 w-24 mx-auto mb-2"
+                className="mx-auto mb-2 h-24 w-24"
               />
               No chunks found
             </div>
@@ -703,10 +703,10 @@ function DocumentChunks({
               .map((chunk, index) => (
                 <div
                   key={index}
-                  className="relative h-56 w-full p-6 border rounded-2xl border-silver dark:border-silver/40 flex flex-col justify-between"
+                  className="relative flex h-56 w-full flex-col justify-between rounded-2xl border border-silver p-6 dark:border-silver/40"
                 >
                   <div className="w-full">
-                    <div className="w-full flex items-center justify-between">
+                    <div className="flex w-full items-center justify-between">
                       <button
                         aria-label={'edit'}
                         onClick={() => {
@@ -715,7 +715,7 @@ function DocumentChunks({
                             chunk: chunk,
                           });
                         }}
-                        className="absolute top-3 right-3 h-4 w-4 cursor-pointer"
+                        className="absolute right-3 top-3 h-4 w-4 cursor-pointer"
                       >
                         <img
                           alt={'edit'}
@@ -725,10 +725,10 @@ function DocumentChunks({
                       </button>
                     </div>
                     <div className="mt-[9px]">
-                      <p className="h-12 text-sm font-semibold text-eerie-black dark:text-[#EEEEEE] leading-relaxed break-words ellipsis-text">
+                      <p className="ellipsis-text h-12 break-words text-sm font-semibold leading-relaxed text-eerie-black dark:text-[#EEEEEE]">
                         {chunk.metadata?.title ?? 'Untitled'}
                       </p>
-                      <p className="mt-1 pr-1 h-[110px] overflow-y-auto text-[13px] text-gray-600 dark:text-gray-400 leading-relaxed break-words">
+                      <p className="mt-1 h-[110px] overflow-y-auto break-words pr-1 text-[13px] leading-relaxed text-gray-600 dark:text-gray-400">
                         {chunk.text}
                       </p>
                     </div>
@@ -745,7 +745,7 @@ function DocumentChunks({
             .toLowerCase()
             .includes(searchTerm.toLowerCase());
         }).length !== 0 && (
-          <div className="mt-10 w-full flex items-center justify-center">
+          <div className="mt-10 flex w-full items-center justify-center">
             <Pagination
               currentPage={page}
               totalPages={Math.ceil(totalChunks / perPage)}
diff --git a/frontend/src/settings/General.tsx b/frontend/src/settings/General.tsx
index fa64507e..05ddbabf 100644
--- a/frontend/src/settings/General.tsx
+++ b/frontend/src/settings/General.tsx
@@ -88,7 +88,7 @@ export default function General() {
       {' '}
       <div className="flex flex-col gap-4">
         {' '}
-        <label className="font-medium text-base text-jet dark:text-bright-gray">
+        <label className="text-base font-medium text-jet dark:text-bright-gray">
           {t('settings.general.selectTheme')}
         </label>
         <Dropdown
@@ -106,7 +106,7 @@ export default function General() {
         />
       </div>
       <div className="flex flex-col gap-4">
-        <label className="font-medium text-base text-jet dark:text-bright-gray">
+        <label className="text-base font-medium text-jet dark:text-bright-gray">
           {t('settings.general.selectLanguage')}
         </label>
         <Dropdown
@@ -124,7 +124,7 @@ export default function General() {
         />
       </div>
       <div className="flex flex-col gap-4">
-        <label className="font-medium text-base text-jet dark:text-bright-gray">
+        <label className="text-base font-medium text-jet dark:text-bright-gray">
           {t('settings.general.chunks')}
         </label>
         <Dropdown
@@ -137,7 +137,7 @@ export default function General() {
         />
       </div>
       <div className="flex flex-col gap-4">
-        <label className="font-medium text-base text-jet dark:text-bright-gray">
+        <label className="text-base font-medium text-jet dark:text-bright-gray">
           {t('settings.general.convHistory')}
         </label>
         <Dropdown
@@ -171,11 +171,11 @@ export default function General() {
           setPrompts={setPrompts}
         />
       </div>
-      <hr className="border-t w-[calc(min(665px,100%))] my-4 border-silver dark:border-silver/40" />
+      <hr className="my-4 w-[calc(min(665px,100%))] border-t border-silver dark:border-silver/40" />
       <div className="flex flex-col gap-2">
         <button
           title={t('settings.general.deleteAllLabel')}
-          className="flex font-medium text-sm w-fit cursor-pointer items-center justify-between rounded-3xl border border-solid border-rosso-corsa bg-transparent px-5 py-3 text-rosso-corsa transition-colors hover:bg-rosso-corsa hover:text-white hover:font-bold tracking-[0.015em] hover:tracking-normal"
+          className="flex w-fit cursor-pointer items-center justify-between rounded-3xl border border-solid border-rosso-corsa bg-transparent px-5 py-3 text-sm font-medium tracking-[0.015em] text-rosso-corsa transition-colors hover:bg-rosso-corsa hover:font-bold hover:tracking-normal hover:text-white"
           onClick={() => dispatch(setModalStateDeleteConv('ACTIVE'))}
         >
           {t('settings.general.deleteAllBtn')}
diff --git a/frontend/src/settings/Prompts.tsx b/frontend/src/settings/Prompts.tsx
index 33540296..055bf0b1 100644
--- a/frontend/src/settings/Prompts.tsx
+++ b/frontend/src/settings/Prompts.tsx
@@ -145,7 +145,7 @@ export default function Prompts({
           <p className="font-medium dark:text-bright-gray">
             {t('settings.general.prompt')}
           </p>
-          <div className="flex flex-row justify-start items-baseline gap-6">
+          <div className="flex flex-row items-baseline justify-start gap-6">
             <Dropdown
               options={prompts}
               selectedValue={selectedPrompt.name}
@@ -174,7 +174,7 @@ export default function Prompts({
             />
 
             <button
-              className="rounded-3xl w-20 h-10 text-sm border border-solid border-violets-are-blue text-violets-are-blue transition-colors hover:text-white hover:bg-violets-are-blue"
+              className="h-10 w-20 rounded-3xl border border-solid border-violets-are-blue text-sm text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
               onClick={() => {
                 setModalType('ADD');
                 setModalState('ACTIVE');
diff --git a/frontend/src/settings/ToolConfig.tsx b/frontend/src/settings/ToolConfig.tsx
index d75a3852..b2e26507 100644
--- a/frontend/src/settings/ToolConfig.tsx
+++ b/frontend/src/settings/ToolConfig.tsx
@@ -115,12 +115,12 @@ export default function ToolConfig({
   };
   return (
     <div className="mt-8 flex flex-col gap-4">
-      <div className="mb-4 flex items-center gap-3 text-eerie-black dark:text-bright-gray text-sm">
+      <div className="mb-4 flex items-center gap-3 text-sm text-eerie-black dark:text-bright-gray">
         <button
-          className="text-sm text-gray-400 dark:text-gray-500 border dark:border-0 dark:bg-[#28292D] dark:hover:bg-[#2E2F34] p-3 rounded-full"
+          className="rounded-full border p-3 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
           onClick={handleGoBack}
         >
-          <img src={ArrowLeft} alt="left-arrow" className="w-3 h-3" />
+          <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
         </button>
         <p className="mt-px">Back to all tools</p>
       </div>
@@ -128,7 +128,7 @@ export default function ToolConfig({
         <p className="text-sm font-semibold text-eerie-black dark:text-bright-gray">
           Type
         </p>
-        <p className="mt-1 text-base font-normal text-eerie-black dark:text-bright-gray font-sans">
+        <p className="mt-1 font-sans text-base font-normal text-eerie-black dark:text-bright-gray">
           {tool.name}
         </p>
       </div>
@@ -138,7 +138,7 @@ export default function ToolConfig({
             Authentication
           </p>
         )}
-        <div className="flex mt-4 flex-col sm:flex-row items-start sm:items-center gap-2">
+        <div className="mt-4 flex flex-col items-start gap-2 sm:flex-row sm:items-center">
           {Object.keys(tool?.config).length !== 0 &&
             tool.name !== 'api_tool' && (
               <div className="relative w-96">
@@ -153,13 +153,13 @@ export default function ToolConfig({
             )}
           <div className="flex items-center gap-2">
             <button
-              className="rounded-full px-5 py-[10px] bg-purple-30 text-white hover:bg-violets-are-blue text-nowrap text-sm"
+              className="text-nowrap rounded-full bg-purple-30 px-5 py-[10px] text-sm text-white hover:bg-violets-are-blue"
               onClick={handleSaveChanges}
             >
               Save changes
             </button>
             <button
-              className="rounded-full px-5 py-[10px] border border-solid border-red-500 text-red-500 hover:bg-red-500 hover:text-white text-nowrap text-sm"
+              className="text-nowrap rounded-full border border-solid border-red-500 px-5 py-[10px] text-sm text-red-500 hover:bg-red-500 hover:text-white"
               onClick={handleDelete}
             >
               Delete
@@ -168,8 +168,8 @@ export default function ToolConfig({
         </div>
       </div>
       <div className="flex flex-col gap-4">
-        <div className="mx-1 my-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40 lg:w-[95%] "></div>
-        <div className="w-full flex flex-row items-center justify-between gap-2">
+        <div className="mx-1 my-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40 lg:w-[95%]"></div>
+        <div className="flex w-full flex-row items-center justify-between gap-2">
           <p className="text-base font-semibold text-eerie-black dark:text-bright-gray">
             Actions
           </p>
@@ -177,7 +177,7 @@ export default function ToolConfig({
             onClick={() => {
               setActionModalState('ACTIVE');
             }}
-            className="border border-solid border-violets-are-blue text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white rounded-full text-sm px-5 py-1"
+            className="rounded-full border border-solid border-violets-are-blue px-5 py-1 text-sm text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
           >
             Add action
           </button>
@@ -191,9 +191,9 @@ export default function ToolConfig({
                 return (
                   <div
                     key={actionIndex}
-                    className="w-full border border-silver dark:border-silver/40 rounded-xl"
+                    className="w-full rounded-xl border border-silver dark:border-silver/40"
                   >
-                    <div className="h-10 bg-[#F9F9F9] dark:bg-[#28292D] rounded-t-xl border-b border-silver dark:border-silver/40 flex items-center justify-between px-5 flex-wrap">
+                    <div className="flex h-10 flex-wrap items-center justify-between rounded-t-xl border-b border-silver bg-[#F9F9F9] px-5 dark:border-silver/40 dark:bg-[#28292D]">
                       <p className="font-semibold text-eerie-black dark:text-bright-gray">
                         {action.name}
                       </p>
@@ -214,10 +214,10 @@ export default function ToolConfig({
                         id={`actionToggle-${actionIndex}`}
                       />
                     </div>
-                    <div className="mt-5 relative">
+                    <div className="relative mt-5">
                       <Input
                         type="text"
-                        className="w-[97%] ml-5"
+                        className="ml-5 w-[97%]"
                         placeholder="Enter description"
                         value={action.description}
                         onChange={(e) => {
@@ -285,7 +285,7 @@ export default function ToolConfig({
                                     <input
                                       key={uniqueKey}
                                       value={param[1].description}
-                                      className="bg-transparent border border-silver dark:border-silver/40 outline-none px-2 py-1 rounded-lg text-sm"
+                                      className="rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40"
                                       onChange={(e) => {
                                         setTool({
                                           ...tool,
@@ -321,7 +321,7 @@ export default function ToolConfig({
                                       value={param[1].value}
                                       key={uniqueKey}
                                       disabled={param[1].filled_by_llm}
-                                      className={`bg-transparent border border-silver dark:border-silver/40 outline-none px-2 py-1 rounded-lg text-sm ${param[1].filled_by_llm ? 'opacity-50' : ''}`}
+                                      className={`rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40 ${param[1].filled_by_llm ? 'opacity-50' : ''}`}
                                       onChange={(e) => {
                                         setTool({
                                           ...tool,
@@ -424,9 +424,9 @@ function APIToolConfig({
             return (
               <div
                 key={actionIndex}
-                className="w-full border border-silver dark:border-silver/40 rounded-xl"
+                className="w-full rounded-xl border border-silver dark:border-silver/40"
               >
-                <div className="h-10 bg-[#F9F9F9] dark:bg-[#28292D] rounded-t-xl border-b border-silver dark:border-silver/40 flex items-center justify-between px-5 flex-wrap">
+                <div className="flex h-10 flex-wrap items-center justify-between rounded-t-xl border-b border-silver bg-[#F9F9F9] px-5 dark:border-silver/40 dark:bg-[#28292D]">
                   <p className="font-semibold text-eerie-black dark:text-bright-gray">
                     {action.name}
                   </p>
@@ -439,7 +439,7 @@ function APIToolConfig({
                 </div>
                 <div className="mt-8 px-5">
                   <div className="relative w-full">
-                    <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-raisin-black dark:text-silver">
+                    <span className="absolute -top-2 left-5 z-10 bg-white px-2 text-xs text-gray-4000 dark:bg-raisin-black dark:text-silver">
                       URL
                     </span>
                     <Input
@@ -471,7 +471,7 @@ function APIToolConfig({
                 </div>
                 <div className="mt-4 px-5 py-2">
                   <div className="relative w-full">
-                    <span className="absolute left-5 -top-2 z-10 bg-white px-2 text-xs text-gray-4000 dark:bg-raisin-black dark:text-silver">
+                    <span className="absolute -top-2 left-5 z-10 bg-white px-2 text-xs text-gray-4000 dark:bg-raisin-black dark:text-silver">
                       Method
                     </span>
                     <Dropdown
@@ -508,7 +508,7 @@ function APIToolConfig({
                 </div>
                 <div className="mt-4 px-5 py-2">
                   <div className="relative w-full">
-                    <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-raisin-black dark:text-silver">
+                    <span className="absolute -top-2 left-5 z-10 bg-white px-2 text-xs text-gray-4000 dark:bg-raisin-black dark:text-silver">
                       Description
                     </span>
                     <Input
@@ -713,7 +713,7 @@ function APIActionTable({
                   <div className="flex flex-row items-center justify-between gap-2">
                     <input
                       value={newPropertyKey}
-                      className="min-w-[130.5px] w-full flex items-start bg-transparent border border-silver dark:border-silver/40 outline-none px-2 py-1 rounded-lg text-sm"
+                      className="flex w-full min-w-[130.5px] items-start rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40"
                       onChange={(e) => setNewPropertyKey(e.target.value)}
                       onKeyDown={(e) => {
                         if (e.key === 'Enter') {
@@ -724,26 +724,26 @@ function APIActionTable({
                     <div className="mt-1">
                       <button
                         onClick={handleRenameProperty}
-                        className="mr-1 w-5 h-5"
+                        className="mr-1 h-5 w-5"
                       >
                         <img
                           src={CircleCheck}
                           alt="check"
-                          className="w-5 h-5"
+                          className="h-5 w-5"
                         />
                       </button>
                       <button
                         onClick={handleRenamePropertyCancel}
-                        className="w-5 h-5"
+                        className="h-5 w-5"
                       >
-                        <img src={CircleX} alt="cancel" className="w-5 h-5" />
+                        <img src={CircleX} alt="cancel" className="h-5 w-5" />
                       </button>
                     </div>
                   </div>
                 ) : (
                   <input
                     value={key}
-                    className="min-w-[175.5px] w-full flex items-start bg-transparent border border-silver dark:border-silver/40 outline-none px-2 py-1 rounded-lg text-sm"
+                    className="flex w-full min-w-[175.5px] items-start rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40"
                     onFocus={() => handleRenamePropertyStart(section, key)}
                     readOnly
                   />
@@ -772,7 +772,7 @@ function APIActionTable({
               <td className="w-10">
                 <input
                   value={param.description}
-                  className="bg-transparent border border-silver dark:border-silver/40 outline-none px-2 py-1 rounded-lg text-sm"
+                  className="rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40"
                   onChange={(e) =>
                     handlePropertyChange(
                       section,
@@ -790,7 +790,7 @@ function APIActionTable({
                   onChange={(e) =>
                     handlePropertyChange(section, key, 'value', e.target.value)
                   }
-                  className={`bg-transparent border border-silver dark:border-silver/40 outline-none px-2 py-1 rounded-lg text-sm ${param.filled_by_llm ? 'opacity-50' : ''}`}
+                  className={`rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40 ${param.filled_by_llm ? 'opacity-50' : ''}`}
                 ></input>
               </td>
               <td
@@ -804,9 +804,9 @@ function APIActionTable({
               >
                 <button
                   onClick={() => handlePorpertyDelete(section, key)}
-                  className="w-4 h-4 opacity-60 hover:opacity-100"
+                  className="h-4 w-4 opacity-60 hover:opacity-100"
                 >
-                  <img src={Trash} alt="delete" className="w-4 h-4"></img>
+                  <img src={Trash} alt="delete" className="h-4 w-4"></img>
                 </button>
               </td>
             </tr>
@@ -824,20 +824,20 @@ function APIActionTable({
                   }
                 }}
                 placeholder="New property key"
-                className="min-w-[130.5px] w-full flex items-start bg-transparent border border-silver dark:border-silver/40 outline-none px-2 py-1 rounded-lg text-sm"
+                className="flex w-full min-w-[130.5px] items-start rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40"
               />
             </td>
             <td colSpan={4} className="text-right">
               <button
                 onClick={handleAddProperty}
-                className="bg-purple-30 text-white hover:bg-violets-are-blue rounded-full px-5 py-[4px] mr-1 text-sm"
+                className="mr-1 rounded-full bg-purple-30 px-5 py-[4px] text-sm text-white hover:bg-violets-are-blue"
               >
                 {' '}
                 Add{' '}
               </button>
               <button
                 onClick={handleAddPropertyCancel}
-                className="border border-solid border-red-500 text-red-500 hover:bg-red-500 hover:text-white rounded-full px-5 py-[4px] text-sm"
+                className="rounded-full border border-solid border-red-500 px-5 py-[4px] text-sm text-red-500 hover:bg-red-500 hover:text-white"
               >
                 {' '}
                 Cancel{' '}
@@ -857,7 +857,7 @@ function APIActionTable({
             <td colSpan={5}>
               <button
                 onClick={() => handleAddPropertyStart(section)}
-                className="flex items-start rounded-full px-5 py-[4px] border border-solid  text-violets-are-blue border-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white text-nowrap text-sm"
+                className="flex items-start text-nowrap rounded-full border border-solid border-violets-are-blue px-5 py-[4px] text-sm text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
               >
                 Add New Field
               </button>
diff --git a/frontend/src/settings/Tools.tsx b/frontend/src/settings/Tools.tsx
index 3a91d30f..9c7b6906 100644
--- a/frontend/src/settings/Tools.tsx
+++ b/frontend/src/settings/Tools.tsx
@@ -101,8 +101,8 @@ export default function Tools() {
         />
       ) : (
         <div className="mt-8">
-          <div className="flex flex-col relative">
-            <div className="my-3 flex justify-between items-center gap-1">
+          <div className="relative flex flex-col">
+            <div className="my-3 flex items-center justify-between gap-1">
               <div className="p-1">
                 <label htmlFor="tool-search-input" className="sr-only">
                   {t('settings.tools.searchPlaceholder')}
@@ -119,7 +119,7 @@ export default function Tools() {
                 />
               </div>
               <button
-                className="rounded-full w-[108px] h-[30px] text-sm bg-purple-30 text-white hover:bg-violets-are-blue flex items-center justify-center"
+                className="flex h-[30px] w-[108px] items-center justify-center rounded-full bg-purple-30 text-sm text-white hover:bg-violets-are-blue"
                 onClick={() => {
                   setAddToolModalState('ACTIVE');
                 }}
@@ -127,23 +127,23 @@ export default function Tools() {
                 {t('settings.tools.addTool')}
               </button>
             </div>
-            <div className="border-b border-light-silver dark:border-dim-gray mb-8 mt-5" />
+            <div className="mb-8 mt-5 border-b border-light-silver dark:border-dim-gray" />
             {loading ? (
-              <div className="grid grid-cols-2 lg:grid-cols-3 gap-6">
-                <div className="mt-24 h-32 col-span-2 lg:col-span-3 flex items-center justify-center">
+              <div className="grid grid-cols-2 gap-6 lg:grid-cols-3">
+                <div className="col-span-2 mt-24 flex h-32 items-center justify-center lg:col-span-3">
                   <Spinner />
                 </div>
               </div>
             ) : (
-              <div className="flex flex-wrap gap-4 justify-center sm:justify-start">
+              <div className="flex flex-wrap justify-center gap-4 sm:justify-start">
                 {userTools.length === 0 ? (
-                  <div className="flex flex-col items-center justify-center w-full py-12">
+                  <div className="flex w-full flex-col items-center justify-center py-12">
                     <img
                       src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
                       alt="No tools found"
-                      className="h-32 w-32 mx-auto mb-6"
+                      className="mx-auto mb-6 h-32 w-32"
                     />
-                    <p className="text-gray-500 dark:text-gray-400 text-center text-lg">
+                    <p className="text-center text-lg text-gray-500 dark:text-gray-400">
                       {t('settings.tools.noToolsFound')}
                     </p>
                   </div>
@@ -157,14 +157,14 @@ export default function Tools() {
                     .map((tool, index) => (
                       <div
                         key={index}
-                        className="h-52 w-[300px] p-6 border rounded-2xl border-light-gainsboro dark:border-arsenic bg-white-3000 dark:bg-transparent flex flex-col justify-between relative"
+                        className="relative flex h-52 w-[300px] flex-col justify-between rounded-2xl border border-light-gainsboro bg-white-3000 p-6 dark:border-arsenic dark:bg-transparent"
                       >
                         <button
                           onClick={() => handleSettingsClick(tool)}
                           aria-label={t('settings.tools.configureToolAria', {
                             toolName: tool.displayName,
                           })}
-                          className="absolute top-4 right-4"
+                          className="absolute right-4 top-4"
                         >
                           <img
                             src={CogwheelIcon}
@@ -173,7 +173,7 @@ export default function Tools() {
                           />
                         </button>
                         <div className="w-full">
-                          <div className="px-1 w-full flex items-center">
+                          <div className="flex w-full items-center px-1">
                             <img
                               src={`/toolIcons/tool_${tool.name}.svg`}
                               alt={`${tool.displayName} icon`}
@@ -183,11 +183,11 @@ export default function Tools() {
                           <div className="mt-[9px]">
                             <p
                               title={tool.displayName}
-                              className="px-1 text-[13px] font-semibold text-raisin-black-light dark:text-bright-gray leading-relaxed capitalize truncate"
+                              className="truncate px-1 text-[13px] font-semibold capitalize leading-relaxed text-raisin-black-light dark:text-bright-gray"
                             >
                               {tool.displayName}
                             </p>
-                            <p className="mt-1 px-1 h-24 overflow-auto text-[12px] text-old-silver dark:text-sonic-silver-light leading-relaxed">
+                            <p className="mt-1 h-24 overflow-auto px-1 text-[12px] leading-relaxed text-old-silver dark:text-sonic-silver-light">
                               {tool.description}
                             </p>
                           </div>
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 8c016b29..61a7bc47 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -69,8 +69,8 @@ function Upload({
                 : 'grid-rows-[0fr] opacity-0'
             }`}
           >
-            <div className="overflow-hidden flex flex-col gap-4">
-              <hr className="my-4 border-[#C4C4C4]/40 border-[1px]" />
+            <div className="flex flex-col gap-4 overflow-hidden">
+              <hr className="my-4 border-[1px] border-[#C4C4C4]/40" />
               <div className="flex flex-col gap-4">
                 {advancedFields.map((field: FormField) => renderField(field))}
               </div>
@@ -212,11 +212,11 @@ function Upload({
 
   function ProgressBar({ progressPercent }: { progressPercent: number }) {
     return (
-      <div className="flex items-center justify-center h-full w-full my-8">
-        <div className="relative w-32 h-32 rounded-full">
+      <div className="my-8 flex h-full w-full items-center justify-center">
+        <div className="relative h-32 w-32 rounded-full">
           <div className="absolute inset-0 rounded-full shadow-[0_0_10px_2px_rgba(0,0,0,0.3)_inset] dark:shadow-[0_0_10px_2px_rgba(0,0,0,0.3)_inset]"></div>
           <div
-            className={`absolute inset-0 rounded-full ${progressPercent === 100 ? 'shadow-xl shadow-lime-300/50 dark:shadow-lime-300/50 bg-gradient-to-r from-white to-gray-400 dark:bg-gradient-to-br dark:from-gray-500 dark:to-gray-300' : 'shadow-[0_4px_0_#7D54D1] dark:shadow-[0_4px_0_#7D54D1]'}`}
+            className={`absolute inset-0 rounded-full ${progressPercent === 100 ? 'bg-gradient-to-r from-white to-gray-400 shadow-xl shadow-lime-300/50 dark:bg-gradient-to-br dark:from-gray-500 dark:to-gray-300 dark:shadow-lime-300/50' : 'shadow-[0_4px_0_#7D54D1] dark:shadow-[0_4px_0_#7D54D1]'}`}
             style={{
               animation: `${progressPercent === 100 ? 'none' : 'rotate 2s linear infinite'}`,
             }}
@@ -270,13 +270,13 @@ function Upload({
                 setProgress(undefined);
                 setModalState('INACTIVE');
               }}
-              className="cursor-pointer rounded-3xl text-sm h-[42px] px-[28px] py-[6px] bg-[#7D54D1] text-white hover:bg-[#6F3FD1] shadow-lg"
+              className="h-[42px] cursor-pointer rounded-3xl bg-[#7D54D1] px-[28px] py-[6px] text-sm text-white shadow-lg hover:bg-[#6F3FD1]"
             >
               {t('modals.uploadDoc.start')}
             </button>
           ) : (
             <button
-              className="ml-2 cursor-pointer rounded-3xl text-sm h-[42px] px-[28px] py-[6px] bg-[#7D54D14D] text-white shadow-lg"
+              className="ml-2 h-[42px] cursor-pointer rounded-3xl bg-[#7D54D14D] px-[28px] py-[6px] text-sm text-white shadow-lg"
               disabled
             >
               {t('modals.uploadDoc.wait')}
@@ -570,33 +570,33 @@ function Upload({
     view = <TrainingProgress></TrainingProgress>;
   } else {
     view = (
-      <div className="flex flex-col gap-4 w-full">
-        <p className="text-2xl text-jet dark:text-bright-gray text-center font-semibold">
+      <div className="flex w-full flex-col gap-4">
+        <p className="text-center text-2xl font-semibold text-jet dark:text-bright-gray">
           {t('modals.uploadDoc.label')}
         </p>
         {!activeTab && (
           <div>
-            <p className="dark text-gray-6000 dark:text-bright-gray text-sm text-center font-medium">
+            <p className="dark text-center text-sm font-medium text-gray-6000 dark:text-bright-gray">
               {t('modals.uploadDoc.select')}
             </p>
-            <div className="w-full gap-4 h-full p-4 flex flex-col md:flex-row md:gap-4 justify-center items-center">
+            <div className="flex h-full w-full flex-col items-center justify-center gap-4 p-4 md:flex-row md:gap-4">
               <button
                 onClick={() => setActiveTab('file')}
-                className="opacity-85 hover:opacity-100 rounded-3xl text-sm font-medium border flex flex-col items-center justify-center hover:shadow-purple-30/30 hover:shadow-lg p-8 gap-4 bg-transparent text-[#777777] dark:bg-transparent dark:text-[#c3c3c3] hover:border-purple-30 border-[#D7D7D7] h-40 w-40 md:w-52 md:h-52"
+                className="flex h-40 w-40 flex-col items-center justify-center gap-4 rounded-3xl border border-[#D7D7D7] bg-transparent p-8 text-sm font-medium text-[#777777] opacity-85 hover:border-purple-30 hover:opacity-100 hover:shadow-lg hover:shadow-purple-30/30 dark:bg-transparent dark:text-[#c3c3c3] md:h-52 md:w-52"
               >
                 <img
                   src={FileUpload}
-                  className="w-12 h-12 mr-2 dark:filter dark:invert dark:brightness-50"
+                  className="mr-2 h-12 w-12 dark:brightness-50 dark:invert dark:filter"
                 />
                 {t('modals.uploadDoc.file')}
               </button>
               <button
                 onClick={() => setActiveTab('remote')}
-                className="opacity-85 hover:opacity-100 rounded-3xl text-sm font-medium border flex flex-col items-center justify-center hover:shadow-purple-30/30 hover:shadow-lg p-8 gap-4 bg-transparent text-[#777777] dark:bg-transparent dark:text-[#c3c3c3] hover:border-purple-30 border-[#D7D7D7] h-40 w-40 md:w-52 md:h-52"
+                className="flex h-40 w-40 flex-col items-center justify-center gap-4 rounded-3xl border border-[#D7D7D7] bg-transparent p-8 text-sm font-medium text-[#777777] opacity-85 hover:border-purple-30 hover:opacity-100 hover:shadow-lg hover:shadow-purple-30/30 dark:bg-transparent dark:text-[#c3c3c3] md:h-52 md:w-52"
               >
                 <img
                   src={WebsiteCollect}
-                  className="w-14 h-14 mr-2 dark:filter dark:invert dark:brightness-50"
+                  className="mr-2 h-14 w-14 dark:brightness-50 dark:invert dark:filter"
                 />
                 {t('modals.uploadDoc.remote')}
               </button>
@@ -617,7 +617,7 @@ function Upload({
               required={true}
             />
             <div className="my-2" {...getRootProps()}>
-              <span className="rounded-3xl bg-transparent px-4 py-2 font-medium text-purple-30 hover:cursor-pointer dark:text-silver border border-[#7F7F82]">
+              <span className="rounded-3xl border border-[#7F7F82] bg-transparent px-4 py-2 font-medium text-purple-30 hover:cursor-pointer dark:text-silver">
                 <input type="button" {...getInputProps()} />
                 {t('modals.uploadDoc.choose')}
               </span>
@@ -633,7 +633,7 @@ function Upload({
                 {files.map((file) => (
                   <p
                     key={file.name}
-                    className="text-gray-6000 truncate overflow-hidden text-ellipsis"
+                    className="overflow-hidden truncate text-ellipsis text-gray-6000"
                     title={file.name}
                   >
                     {file.name}
@@ -681,7 +681,7 @@ function Upload({
             ) && (
               <button
                 onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
-                className="text-purple-30 text-sm font-normal pl-0 py-2 bg-transparent hover:cursor-pointer text-left"
+                className="bg-transparent py-2 pl-0 text-left text-sm font-normal text-purple-30 hover:cursor-pointer"
               >
                 {showAdvancedOptions
                   ? t('modals.uploadDoc.hideAdvanced')
@@ -694,7 +694,7 @@ function Upload({
           {activeTab && (
             <button
               onClick={() => setActiveTab(null)}
-              className="rounded-3xl bg-transparent px-4 py-2 font-medium text-purple-30 hover:cursor-pointer dark:text-silver text-[14px]"
+              className="rounded-3xl bg-transparent px-4 py-2 text-[14px] font-medium text-purple-30 hover:cursor-pointer dark:text-silver"
             >
               {t('modals.uploadDoc.back')}
             </button>
@@ -709,7 +709,7 @@ function Upload({
                 }
               }}
               disabled={isUploadDisabled()}
-              className={`rounded-3xl px-4 py-2 font-medium text-[14px] ${
+              className={`rounded-3xl px-4 py-2 text-[14px] font-medium ${
                 isUploadDisabled()
                   ? 'cursor-not-allowed bg-gray-300 text-gray-500'
                   : 'cursor-pointer bg-purple-30 text-white hover:bg-violets-are-blue'

From 183251487c0cd19cbc60a07ba6fc648ac2ef6320 Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Wed, 7 May 2025 23:37:35 +0100
Subject: [PATCH 22/26] lint: remove unused import of 'io' in worker.py

---
 application/worker.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/application/worker.py b/application/worker.py
index 2f9e97f3..9829fde9 100755
--- a/application/worker.py
+++ b/application/worker.py
@@ -1,5 +1,4 @@
 import datetime
-import io
 import json
 import logging
 import mimetypes

From 3243740dd1758ba9090009208becdfd8fe037bdd Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 8 May 2025 16:10:31 +0530
Subject: [PATCH 23/26] (fix-bubble) inconsistent width with snippets

---
 frontend/src/conversation/ConversationBubble.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 1f9ceccc..2f9891b5 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -370,7 +370,7 @@ const ConversationBubble = forwardRef<
           <Thought thought={thought} preprocessLaTeX={preprocessLaTeX} />
         )}
         {message && (
-          <div className="flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
+          <div className="flex max-w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
             <div className="my-2 flex flex-row items-center justify-center gap-3">
               <Avatar
                 className="h-[34px] w-[34px] text-2xl"
@@ -387,7 +387,7 @@ const ConversationBubble = forwardRef<
               </p>
             </div>
             <div
-              className={`fade-in-bubble ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 px-7 py-[18px] dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
+              className={`fade-in-bubble mr-5 flex max-w-full rounded-[28px] bg-gray-1000 px-7 py-[18px] dark:bg-gun-metal ${
                 type === 'ERROR'
                   ? 'relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000 dark:border-red-2000 dark:text-white'
                   : 'flex-col rounded-3xl'

From e1aa2cc0b86bf692aa40ef938b43c9bd0082f199 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Fri, 9 May 2025 02:26:35 +0530
Subject: [PATCH 24/26] (fix:ingestion) store file name as metadata, not path

---
 application/parser/file/bulk.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/application/parser/file/bulk.py b/application/parser/file/bulk.py
index 8201b3f2..da6dc298 100644
--- a/application/parser/file/bulk.py
+++ b/application/parser/file/bulk.py
@@ -158,7 +158,7 @@ class SimpleDirectoryReader(BaseReader):
                     data = f.read()
             # Prepare metadata for this file
             if self.file_metadata is not None:
-                file_metadata = self.file_metadata(str(input_file))
+                file_metadata = self.file_metadata(input_file.name)
             else:
                 # Provide a default empty metadata
                 file_metadata = {'title': '', 'store': ''}

From 7d76a337901239835014ad55c1174fbef8c9738e Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Fri, 9 May 2025 22:15:55 +0100
Subject: [PATCH 25/26] fix:(style) update layout for agent list and card
 components

---
 frontend/src/agents/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/agents/index.tsx b/frontend/src/agents/index.tsx
index d0052111..4634dc76 100644
--- a/frontend/src/agents/index.tsx
+++ b/frontend/src/agents/index.tsx
@@ -127,7 +127,7 @@ function AgentsList() {
             New Agent
           </button>
         </div>
-        <div className="flex w-full flex-wrap gap-4">
+        <div className="grid w-full grid-cols-2 gap-2 md:flex md:flex-wrap md:gap-4">
           {loading ? (
             <div className="flex h-72 w-full items-center justify-center">
               <Spinner />
@@ -231,7 +231,7 @@ function AgentCard({
   };
   return (
     <div
-      className={`relative flex h-44 w-48 flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] dark:bg-[#383838] hover:dark:bg-[#383838]/80 ${agent.status === 'published' && 'cursor-pointer'}`}
+      className={`relative flex h-44 w-full flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] dark:bg-[#383838] hover:dark:bg-[#383838]/80 md:w-48 ${agent.status === 'published' && 'cursor-pointer'}`}
       onClick={(e) => {
         e.stopPropagation();
         handleClick();

From 32803c89a393406926658d8a52f7f7195df46712 Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Fri, 9 May 2025 22:52:17 +0100
Subject: [PATCH 26/26] fix: truncate tool call results to 50 characters for
 cleaner output

---
 application/agents/classic_agent.py | 4 ++++
 application/agents/react_agent.py   | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/application/agents/classic_agent.py b/application/agents/classic_agent.py
index b96a77fc..b371123b 100644
--- a/application/agents/classic_agent.py
+++ b/application/agents/classic_agent.py
@@ -57,4 +57,8 @@ class ClassicAgent(BaseAgent):
         )
 
         yield {"sources": retrieved_data}
+        # clean tool_call_data only send first 50 characters of tool_call['result']
+        for tool_call in self.tool_calls:
+            if len(str(tool_call["result"])) > 50:
+                tool_call["result"] = str(tool_call["result"])[:50] + "..."
         yield {"tool_calls": self.tool_calls.copy()}
diff --git a/application/agents/react_agent.py b/application/agents/react_agent.py
index a5d47850..5fce00b3 100644
--- a/application/agents/react_agent.py
+++ b/application/agents/react_agent.py
@@ -87,6 +87,10 @@ class ReActAgent(BaseAgent):
         )
 
         yield {"sources": retrieved_data}
+        # clean tool_call_data only send first 50 characters of tool_call['result']
+        for tool_call in self.tool_calls:
+            if len(str(tool_call["result"])) > 50:
+                tool_call["result"] = str(tool_call["result"])[:50] + "..."
         yield {"tool_calls": self.tool_calls.copy()}
 
         final_answer = self._create_final_answer(query, self.observations, log_context)