feat: Add MessageList component for chat display with specialized UI and update package dependencies.

package-lock.json

@@ -18,7 +18,7 @@
         "react-dom": "^19.1.0",
         "react-markdown": "^9.0.1",
         "react-router-dom": "^7.10.1",
-        "react-scripts": "5.0.1",
+        "react-scripts": "^5.0.1",
         "recharts": "^3.5.1",
         "web-vitals": "^2.1.4"
       },
@@ -77,6 +77,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -726,6 +727,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.27.1.tgz",
       "integrity": "sha512-p9OkPbZ5G7UT1MofwYFigGebnrzGJacoBSQM0/6bi/PUMVE+qlWDD/OalvQKbwgQzU6dl0xAv6r4X7Jme0RYxA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.27.1"
       },
@@ -1609,6 +1611,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.27.1.tgz",
       "integrity": "sha512-2KH4LWGSrJIkVf5tSiBFYuXDAoWRq2MMwgivCf+93dd0GQi8RXLjKA/0EvRnVV5G0hrHczsquXuD01L8s6dmBw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.27.1",
         "@babel/helper-module-imports": "^7.27.1",
@@ -3386,6 +3389,7 @@
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -3863,6 +3867,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -3873,6 +3878,7 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -3999,6 +4005,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
       "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.4.0",
         "@typescript-eslint/scope-manager": "5.62.0",
@@ -4052,6 +4059,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
       "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "5.62.0",
         "@typescript-eslint/types": "5.62.0",
@@ -4421,6 +4429,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4519,6 +4528,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -5436,6 +5446,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -7228,9 +7239,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.18.3",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
-      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz",
+      "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==",
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -7268,9 +7279,9 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.24.0",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
-      "integrity": "sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==",
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
+      "integrity": "sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==",
       "license": "MIT",
       "dependencies": {
         "array-buffer-byte-length": "^1.0.2",
@@ -7360,26 +7371,26 @@
       }
     },
     "node_modules/es-iterator-helpers": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
-      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.2.tgz",
+      "integrity": "sha512-BrUQ0cPTB/IwXj23HtwHjS9n7O4h9FX94b4xc5zlTHxeLgTAdzYUDyy6KdExAl9lbN5rtfe44xpjpmj9grxs5w==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
+        "call-bound": "^1.0.4",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.6",
+        "es-abstract": "^1.24.1",
         "es-errors": "^1.3.0",
-        "es-set-tostringtag": "^2.0.3",
+        "es-set-tostringtag": "^2.1.0",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.6",
+        "get-intrinsic": "^1.3.0",
         "globalthis": "^1.0.4",
         "gopd": "^1.2.0",
         "has-property-descriptors": "^1.0.2",
         "has-proto": "^1.2.0",
         "has-symbols": "^1.1.0",
         "internal-slot": "^1.1.0",
-        "iterator.prototype": "^1.1.4",
+        "iterator.prototype": "^1.1.5",
         "safe-array-concat": "^1.1.3"
       },
       "engines": {
@@ -7387,9 +7398,9 @@
       }
     },
     "node_modules/es-module-lexer": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
-      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
+      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
       "license": "MIT"
     },
     "node_modules/es-object-atoms": {
@@ -7522,6 +7533,7 @@
       "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -10393,6 +10405,7 @@
       "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
       "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/core": "^27.5.1",
         "import-local": "^3.0.2",
@@ -11278,6 +11291,7 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -12782,21 +12796,21 @@
       }
     },
     "node_modules/object.getownpropertydescriptors": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.8.tgz",
-      "integrity": "sha512-qkHIGe4q0lSYMv0XI4SsBTJz3WaURhLvd0lKSgtVuOsJ2krg4SgMw3PIRQFMp07yi++UR3se2mkcLqsBNpBb/A==",
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.9.tgz",
+      "integrity": "sha512-mt8YM6XwsTTovI+kdZdHSxoyF2DI59up034orlC9NfweclcWOt7CVascNNLp6U+bjFVCVCIh9PwS76tDM/rH8g==",
       "license": "MIT",
       "dependencies": {
-        "array.prototype.reduce": "^1.0.6",
-        "call-bind": "^1.0.7",
+        "array.prototype.reduce": "^1.0.8",
+        "call-bind": "^1.0.8",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-object-atoms": "^1.0.0",
-        "gopd": "^1.0.1",
-        "safe-array-concat": "^1.1.2"
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "gopd": "^1.2.0",
+        "safe-array-concat": "^1.1.3"
       },
       "engines": {
-        "node": ">= 0.8"
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -13263,6 +13277,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -14397,6 +14412,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -14767,6 +14783,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
       "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -14898,6 +14915,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
       "integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -14915,7 +14933,8 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/react-markdown": {
       "version": "9.1.0",
@@ -14949,6 +14968,7 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -14972,6 +14992,7 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -15210,7 +15231,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -15569,6 +15591,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -15811,6 +15834,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -15872,9 +15896,9 @@
       }
     },
     "node_modules/send": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.19.1.tgz",
-      "integrity": "sha512-p4rRk4f23ynFEfcD9LA0xRYngj+IyGiEYyqqOak8kaN0TvNmuxC2dcVeBn62GpCeR2CpWqyHCNScTP91QbAVFg==",
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz",
+      "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==",
       "license": "MIT",
       "dependencies": {
         "debug": "2.6.9",
@@ -15883,13 +15907,13 @@
         "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
+        "fresh": "~0.5.2",
+        "http-errors": "~2.0.1",
         "mime": "1.6.0",
         "ms": "2.1.3",
-        "on-finished": "2.4.1",
+        "on-finished": "~2.4.1",
         "range-parser": "~1.2.1",
-        "statuses": "2.0.1"
+        "statuses": "~2.0.2"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -15910,31 +15934,6 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
-    "node_modules/send/node_modules/http-errors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-      "license": "MIT",
-      "dependencies": {
-        "depd": "2.0.0",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "toidentifier": "1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/send/node_modules/statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/serialize-javascript": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
@@ -16023,93 +16022,20 @@
       }
     },
     "node_modules/serve-static": {
-      "version": "1.16.2",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
-      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
+      "version": "1.16.3",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz",
+      "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==",
       "license": "MIT",
       "dependencies": {
         "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.19.0"
+        "send": "~0.19.1"
       },
       "engines": {
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/serve-static/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/serve-static/node_modules/debug/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "license": "MIT"
-    },
-    "node_modules/serve-static/node_modules/http-errors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-      "license": "MIT",
-      "dependencies": {
-        "depd": "2.0.0",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "toidentifier": "1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/serve-static/node_modules/send": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
-      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "mime": "1.6.0",
-        "ms": "2.1.3",
-        "on-finished": "2.4.1",
-        "range-parser": "~1.2.1",
-        "statuses": "2.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/serve-static/node_modules/send/node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/serve-static/node_modules/statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/set-cookie-parser": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
@@ -17290,9 +17216,9 @@
       }
     },
     "node_modules/terser-webpack-plugin": {
-      "version": "5.3.15",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.15.tgz",
-      "integrity": "sha512-PGkOdpRFK+rb1TzVz+msVhw4YMRT9txLF4kRqvJhGhCM324xuR3REBSHALN+l+sAhKUmz0aotnjp5D+P83mLhQ==",
+      "version": "5.3.16",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.16.tgz",
+      "integrity": "sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.25",
@@ -17426,6 +17352,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -17718,9 +17645,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
       "peer": true,
       "bin": {
@@ -17728,7 +17655,7 @@
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/unbox-primitive": {
@@ -18160,9 +18087,9 @@
       }
     },
     "node_modules/watchpack": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
-      "integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.0.tgz",
+      "integrity": "sha512-e6vZvY6xboSwLz2GD36c16+O/2Z6fKvIf4pOXptw2rY9MVwE/TXc6RGqxD3I3x0a28lwBY7DE+76uTPSsBrrCA==",
       "license": "MIT",
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
@@ -18197,10 +18124,11 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.103.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.103.0.tgz",
-      "integrity": "sha512-HU1JOuV1OavsZ+mfigY0j8d1TgQgbZ6M+J75zDkpEAwYeXjWSqrGJtgnPblJjd/mAyTNQ7ygw0MiKOn6etz8yw==",
+      "version": "5.104.1",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.104.1.tgz",
+      "integrity": "sha512-Qphch25abbMNtekmEGJmeRUhLDbe+QfiWTiqpKYkpCOWY64v9eyl+KRRLmqOFA2AvKPpc9DC6+u2n76tQLBoaA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.8",
@@ -18210,10 +18138,10 @@
         "@webassemblyjs/wasm-parser": "^1.14.1",
         "acorn": "^8.15.0",
         "acorn-import-phases": "^1.0.3",
-        "browserslist": "^4.26.3",
+        "browserslist": "^4.28.1",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.17.3",
-        "es-module-lexer": "^1.2.1",
+        "enhanced-resolve": "^5.17.4",
+        "es-module-lexer": "^2.0.0",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
         "glob-to-regexp": "^0.4.1",
@@ -18224,7 +18152,7 @@
         "neo-async": "^2.6.2",
         "schema-utils": "^4.3.3",
         "tapable": "^2.3.0",
-        "terser-webpack-plugin": "^5.3.11",
+        "terser-webpack-plugin": "^5.3.16",
         "watchpack": "^2.4.4",
         "webpack-sources": "^3.3.3"
       },
@@ -18684,6 +18612,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",

package.json

@@ -7,13 +7,13 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
-    "react-markdown": "^9.0.1",
     "lucide-react": "^0.561.0",
     "postgres": "^3.4.7",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-markdown": "^9.0.1",
     "react-router-dom": "^7.10.1",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "recharts": "^3.5.1",
     "web-vitals": "^2.1.4"
   },

src/app/components/chat/MessageList.tsx

@@ -12,6 +12,19 @@ type MessageListProps = {
   onRetry?: () => void;
 };
 
+/**
+ * Helper to determine if a message should use the specialized detection stance UI
+ */
+const isSpecializedStanceUI = (message: ChatMessage): boolean => {
+  const toolLower = message.tool?.toLowerCase() || '';
+  if (!toolLower.includes('detect') || !toolLower.includes('stance')) return false;
+
+  if (message.role === 'user') {
+    return message.content.includes('**Topic:**');
+  }
+  return message.role === 'assistant';
+};
+
 const MessageList = ({ messages, isLoading = false, error = null, onRetry }: MessageListProps) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
@@ -32,9 +45,9 @@ const MessageList = ({ messages, isLoading = false, error = null, onRetry }: Mes
 
   const getToolClasses = (message: ChatMessage) => {
     if (message.role !== 'assistant' || !message.tool) return '';
-  
+
     const toolLower = message.tool.toLowerCase();
-    
+
     // Match tool names flexibly (case-insensitive, handles variations)
     if (toolLower.includes('detect') && toolLower.includes('stance')) {
       return 'border-l-4 border-blue-400 pl-3 bg-blue-50/30 dark:bg-blue-900/10';
@@ -45,16 +58,16 @@ const MessageList = ({ messages, isLoading = false, error = null, onRetry }: Mes
     if (toolLower.includes('extract') && toolLower.includes('topic')) {
       return 'border-l-4 border-emerald-400 pl-3 bg-emerald-50/30 dark:bg-emerald-900/10';
     }
-    
+
     // Default styling for other tools
     return 'border-l-4 border-teal-400 pl-3 bg-teal-50/30 dark:bg-teal-900/10';
   };
 
   const getToolLabel = (tool: string | null | undefined): string => {
     if (!tool) return '';
-    
+
     const toolLower = tool.toLowerCase();
-    
+
     if (toolLower.includes('detect') && toolLower.includes('stance')) {
       return 'Detect Stance';
     }
@@ -64,13 +77,13 @@ const MessageList = ({ messages, isLoading = false, error = null, onRetry }: Mes
     if (toolLower.includes('extract') && toolLower.includes('topic')) {
       return 'Extract Topic';
     }
-    
+
     // Return formatted tool name (capitalize first letter of each word)
-    return tool.split(/[\s_-]+/).map(word => 
+    return tool.split(/[\s_-]+/).map(word =>
       word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
     ).join(' ');
   };
-  
+
   return (
     <div className="flex-1 overflow-y-auto px-4 py-6 space-y-4">
       {messages.length === 0 && !isLoading && (
@@ -91,236 +104,190 @@ const MessageList = ({ messages, isLoading = false, error = null, onRetry }: Mes
         </div>
       )}
 
-      {messages.map((message, index) => (
-        <div
-          key={message.id}
-          className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
-        >
+      {messages.map((message, index) => {
+        const showSpecializedStance = isSpecializedStanceUI(message);
+
+        return (
           <div
-            className={`max-w-3xl px-4 py-3 rounded-2xl ${
-              message.role === 'user'
+            key={message.id}
+            className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
+          >
+            <div
+              className={`max-w-3xl px-4 py-3 rounded-2xl ${message.role === 'user'
                 ? 'bg-teal-500 text-white ml-12'
                 : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 mr-12'
-            }${getToolClasses(message)}`} // Apply tool-specific classes
-          >
-            {message.audioUrl ? (
-              // Audio message display with toggleable text transcript
-              <div>
-                <AudioPlayer
-                  src={message.audioUrl}
-                  autoPlay={message.role === 'assistant' && index === messages.length - 1} // Auto-play only the most recent AI response
-                />
+                }${getToolClasses(message) ? ' ' + getToolClasses(message) : ''}`}
+            >
+              {message.audioUrl ? (
+                <div>
+                  <AudioPlayer
+                    src={message.audioUrl}
+                    autoPlay={message.role === 'assistant' && index === messages.length - 1}
+                  />
                   <TranscriptToggle content={message.content} />
-              </div>
-            ) : (
-              // Regular text message
-              <div>
-                {message.tool && message.role === 'assistant' && (
-                  <div className="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
-                    {getToolLabel(message.tool)}
-                  </div>
-                )}
-
-                {/* Format user message for detect stance tool */}
-                {message.tool && 
-                 message.role === 'user' && 
-                 message.tool.toLowerCase().includes('detect') && 
-                 message.tool.toLowerCase().includes('stance') && 
-                 message.content.includes('**Topic:**') ? (
-                  <div className="space-y-2">
-                    {message.content.split('\n').map((line, idx) => {
-                      if (line.startsWith('**Topic:**')) {
-                        const topicText = line.replace('**Topic:**', '').trim();
-                        return (
-                          <div key={idx}>
-                            <span className="text-xs font-semibold opacity-90">Topic: </span>
-                            <span className="text-sm">{topicText}</span>
-                          </div>
-                        );
-                      } else if (line.startsWith('**Argument:**')) {
-                        const argumentText = line.replace('**Argument:**', '').trim();
-                        return (
-                          <div key={idx}>
-                            <span className="text-xs font-semibold opacity-90">Argument: </span>
-                            <span className="text-sm">{argumentText}</span>
-                          </div>
-                        );
-                      }
-                      return null;
-                    })}
-                  </div>
-                ) : message.role === 'user' ? (
-                  <div className="whitespace-pre-wrap break-words">
-                    {message.content}
-                  </div>
-                ) : null}
-
-                {/* Detect stance results with formatted display (only for assistant messages) */}
-                {message.role === 'assistant' &&
-                 message.tool && 
-                 message.tool.toLowerCase().includes('detect') && 
-                 message.tool.toLowerCase().includes('stance') ? (
-                  <div className="space-y-3">
-                    {message.content.split('\n').map((line, idx) => {
-                      if (line.startsWith('**Stance:**')) {
-                        const stanceText = line.replace('**Stance:**', '').trim();
-                        const isPro = stanceText.includes('PRO') || stanceText.toLowerCase().includes('positive');
-                        return (
-                          <div key={idx} className="flex items-center gap-2">
-                            <span className="text-xs font-semibold text-gray-600 dark:text-gray-400">Stance:</span>
-                            <span className={`px-2.5 py-1 rounded-full text-xs font-semibold ${
-                              isPro 
-                                ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200' 
-                                : 'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-200'
-                            }`}>
-                              {stanceText}
-                            </span>
-                          </div>
-                        );
-                      } else if (line.startsWith('**Confidence:**')) {
-                        const confidenceText = line.replace('**Confidence:**', '').trim();
-                        // Extract numeric value from percentage string (e.g., "96.0%" -> 96.0)
-                        const confidenceValue = parseFloat(confidenceText.replace('%', '')) || 0;
-                        // Determine color based on confidence level
-                        const getConfidenceColor = (value: number) => {
-                          if (value >= 80) return 'bg-emerald-500';
-                          if (value >= 60) return 'bg-yellow-500';
-                          return 'bg-orange-500';
-                        };
-                        return (
-                          <div key={idx} className="space-y-2">
-                            <div className="flex items-center justify-between gap-2">
-                              <span className="text-xs font-semibold text-gray-600 dark:text-gray-400">Confidence:</span>
-                              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{confidenceText}</span>
-                            </div>
-                            {/* Confidence temperature scale */}
-                            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
-                              <div 
-                                className={`h-full transition-all duration-500 ${getConfidenceColor(confidenceValue)}`}
-                                style={{ width: `${Math.min(confidenceValue, 100)}%` }}
-                              />
-                            </div>
-                            {/* Confidence level indicators */}
-                            <div className="flex justify-between text-[10px] text-gray-400 dark:text-gray-500">
-                              <span>Low</span>
-                              <span>Medium</span>
-                              <span>High</span>
-                            </div>
-                          </div>
-                        );
-                      } else if (line.startsWith('**Explanation:**')) {
-                        // Extract explanation text (everything after "**Explanation:**\n")
-                        const explanationParts = message.content.split('**Explanation:**\n');
-                        const explanationText = explanationParts.length > 1 ? explanationParts[1] : '';
-                        return (
-                          <div key={idx} className="pt-2 border-t border-gray-200 dark:border-gray-700">
-                            <div className="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">Explanation:</div>
-                            <div className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap leading-relaxed">
-                              {explanationText}
-                            </div>
-                          </div>
-                        );
-                      } else if (line.trim() === '') {
-                        return null;
-                      }
-                      return null;
-                    })}
-                  </div>
-                ) : message.role === 'assistant' ? (
-                  <div className="whitespace-pre-wrap break-words">
-                    {message.content}
-                  </div>
-                ) : null}
-
-                {/* Process pipeline for extract topic tool */}
-                {message.role === 'assistant' && 
-                 message.tool && 
-                 message.tool.toLowerCase().includes('extract') && 
-                 message.tool.toLowerCase().includes('topic') &&
-                 message.process && (
-                  <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
-                    <div className="flex items-center gap-2 flex-wrap">
-                      <span className="text-[10px] uppercase tracking-wide text-gray-400 dark:text-gray-500 font-medium">
-                        Process:
-                      </span>
-                      {message.process.split('→').map((step, index, steps) => (
-                        <React.Fragment key={index}>
-                          <span className="px-2 py-0.5 text-[10px] bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded font-medium">
-                            {step.trim()}
-                          </span>
-                          {index < steps.length - 1 && (
-                            <span className="text-gray-400 dark:text-gray-600 text-xs">→</span>
-                          )}
-                        </React.Fragment>
-                      ))}
-                    </div>
-                  </div>
-                )}
-                <div className="text-sm leading-relaxed break-words">
-                  <ReactMarkdown
-                    components={{
-                      p: ({ node, ...props }) => (
-                        <p {...props} className="whitespace-pre-wrap mb-2 last:mb-0" />
-                      ),
-                      ul: ({ node, ...props }) => (
-                        <ul
-                          {...props}
-                          className="list-disc ml-5 space-y-1 mb-2 last:mb-0"
-                        />
-                      ),
-                      ol: ({ node, ...props }) => (
-                        <ol
-                          {...props}
-                          className="list-decimal ml-5 space-y-1 mb-2 last:mb-0"
-                        />
-                      ),
-                      li: ({ node, ...props }) => (
-                        <li {...props} className="ml-1" />
-                      ),
-                    }}
-                  >
-                    {message.content}
-                  </ReactMarkdown>
                 </div>
+              ) : (
+                <div className="space-y-3">
+                  {message.tool && message.role === 'assistant' && (
+                    <div className="mb-1 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                      {getToolLabel(message.tool)}
+                    </div>
+                  )}
 
-                {message.role === 'assistant' && message.tool && 
-                 message.tool.toLowerCase().includes('generate') && 
-                 message.tool.toLowerCase().includes('argument') && 
-                 message.stance && (
-                  <div className="mt-3 flex gap-2">
-                    {message.stance === 'positive' && (
-                      <button
-                        type="button"
-                        className="px-3 py-1 text-xs rounded-full bg-emerald-500 text-white font-medium shadow-sm"
+                  {showSpecializedStance ? (
+                    <div className="space-y-3">
+                      {message.role === 'user' ? (
+                        <div className="space-y-2">
+                          {message.content.split('\n').map((line, idx) => {
+                            if (line.startsWith('**Topic:**')) {
+                              const topicText = line.replace('**Topic:**', '').trim();
+                              return (
+                                <div key={idx}>
+                                  <span className="text-xs font-semibold opacity-90">Topic: </span>
+                                  <span className="text-sm">{topicText}</span>
+                                </div>
+                              );
+                            } else if (line.startsWith('**Argument:**')) {
+                              const argumentText = line.replace('**Argument:**', '').trim();
+                              return (
+                                <div key={idx}>
+                                  <span className="text-xs font-semibold opacity-90">Argument: </span>
+                                  <span className="text-sm">{argumentText}</span>
+                                </div>
+                              );
+                            }
+                            return null;
+                          })}
+                        </div>
+                      ) : (
+                        <div className="space-y-3">
+                          {message.content.split('\n').map((line, idx) => {
+                            if (line.startsWith('**Stance:**')) {
+                              const stanceText = line.replace('**Stance:**', '').trim();
+                              const isPro = stanceText.includes('PRO') || stanceText.toLowerCase().includes('positive');
+                              return (
+                                <div key={idx} className="flex items-center gap-2">
+                                  <span className="text-xs font-semibold text-gray-600 dark:text-gray-400">Stance:</span>
+                                  <span className={`px-2.5 py-1 rounded-full text-xs font-semibold ${isPro
+                                    ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200'
+                                    : 'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-200'
+                                    }`}>
+                                    {stanceText}
+                                  </span>
+                                </div>
+                              );
+                            } else if (line.startsWith('**Confidence:**')) {
+                              const confidenceText = line.replace('**Confidence:**', '').trim();
+                              const confidenceValue = parseFloat(confidenceText.replace('%', '')) || 0;
+                              const getConfidenceColor = (value: number) => {
+                                if (value >= 80) return 'bg-emerald-500';
+                                if (value >= 60) return 'bg-yellow-500';
+                                return 'bg-orange-500';
+                              };
+                              return (
+                                <div key={idx} className="space-y-2">
+                                  <div className="flex items-center justify-between gap-2">
+                                    <span className="text-xs font-semibold text-gray-600 dark:text-gray-400">Confidence:</span>
+                                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{confidenceText}</span>
+                                  </div>
+                                  <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 overflow-hidden">
+                                    <div
+                                      className={`h-full transition-all duration-500 ${getConfidenceColor(confidenceValue)}`}
+                                      style={{ width: `${Math.min(confidenceValue, 100)}%` }}
+                                    />
+                                  </div>
+                                </div>
+                              );
+                            } else if (line.startsWith('**Explanation:**')) {
+                              const explanationParts = message.content.split('**Explanation:**\n');
+                              const explanationText = explanationParts.length > 1 ? explanationParts[1] : '';
+                              return (
+                                <div key={idx} className="pt-2 border-t border-gray-200 dark:border-gray-700">
+                                  <div className="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1">Explanation:</div>
+                                  <div className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap leading-relaxed">
+                                    {explanationText}
+                                  </div>
+                                </div>
+                              );
+                            }
+                            return null;
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <div className="text-sm leading-relaxed break-words">
+                      <ReactMarkdown
+                        components={{
+                          p: ({ node, ...props }) => (
+                            <p {...props} className="whitespace-pre-wrap mb-2 last:mb-0" />
+                          ),
+                          ul: ({ node, ...props }) => (
+                            <ul {...props} className="list-disc ml-5 space-y-1 mb-2 last:mb-0" />
+                          ),
+                          ol: ({ node, ...props }) => (
+                            <ol {...props} className="list-decimal ml-5 space-y-1 mb-2 last:mb-0" />
+                          ),
+                          li: ({ node, ...props }) => (
+                            <li {...props} className="ml-1" />
+                          ),
+                        }}
                       >
-                        Positive stance
-                      </button>
+                        {typeof message.content === 'string' ? message.content : ''}
+                      </ReactMarkdown>
+                    </div>
+                  )}
+
+                  {/* Process pipeline for extract topic tool */}
+                  {message.role === 'assistant' &&
+                    message.tool?.toLowerCase().includes('extract') &&
+                    message.tool?.toLowerCase().includes('topic') &&
+                    message.process && (
+                      <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
+                        <div className="flex items-center gap-2 flex-wrap">
+                          <span className="text-[10px] uppercase tracking-wide text-gray-400 dark:text-gray-500 font-medium">
+                            Process:
+                          </span>
+                          {message.process.split('→').map((step, sIdx, steps) => (
+                            <React.Fragment key={sIdx}>
+                              <span className="px-2 py-0.5 text-[10px] bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded font-medium">
+                                {step.trim()}
+                              </span>
+                              {sIdx < steps.length - 1 && (
+                                <span className="text-gray-400 dark:text-gray-600 text-xs">→</span>
+                              )}
+                            </React.Fragment>
+                          ))}
+                        </div>
+                      </div>
                     )}
-                    {message.stance === 'negative' && (
-                      <button
-                        type="button"
-                        className="px-3 py-1 text-xs rounded-full bg-rose-500 text-white font-medium shadow-sm"
-                      >
-                        Negative stance
-                      </button>
+
+                  {/* Stance info for generate argument tool */}
+                  {message.role === 'assistant' &&
+                    message.tool?.toLowerCase().includes('generate') &&
+                    message.tool?.toLowerCase().includes('argument') &&
+                    message.stance && (
+                      <div className="mt-2 flex gap-2">
+                        <span className={`px-2.5 py-0.5 text-[10px] rounded-full font-semibold uppercase tracking-wider ${message.stance === 'positive'
+                          ? 'bg-emerald-500 text-white'
+                          : 'bg-rose-500 text-white'
+                          }`}>
+                          {message.stance} stance
+                        </span>
+                      </div>
                     )}
-                  </div>
-                )}
+                </div>
+              )}
+              <div
+                className={`text-[10px] mt-2 opacity-60 ${message.role === 'user' ? 'text-right opacity-80' : 'text-left'
+                  }`}
+              >
+                {formatTime(message.timestamp)}
               </div>
-            )}
-            <div
-              className={`text-xs mt-1 ${
-                message.role === 'user'
-                  ? 'text-teal-100'
-                  : 'text-gray-500 dark:text-gray-400'
-              }`}
-            >
-              {formatTime(message.timestamp)}
             </div>
           </div>
-        </div>
-      ))}
-
+        );
+      })}
 
       {isLoading && (
         <div className="flex justify-start">