fix(ui): overflow in queries

frontend/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@reduxjs/toolkit": "^1.9.2",
         "@vercel/analytics": "^0.1.10",
+        "chart.js": "^4.4.4",
         "i18next": "^23.14.0",
         "i18next-browser-languagedetector": "^8.0.0",
         "prop-types": "^15.8.1",
@@ -970,8 +971,7 @@
     "node_modules/@kurkle/color": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
-      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
-      "peer": true
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
     },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
@@ -1627,7 +1627,7 @@
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -2067,19 +2067,6 @@
         "vite": "^4.2.0 || ^5.0.0"
       }
     },
-    "node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
-      "peer": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
@@ -2619,7 +2606,7 @@
       "version": "4.4.4",
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.4.tgz",
       "integrity": "sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA==",
-      "peer": true,
+      "license": "MIT",
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },

frontend/package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.2",
     "@vercel/analytics": "^0.1.10",
+    "chart.js": "^4.4.4",
     "i18next": "^23.14.0",
     "i18next-browser-languagedetector": "^8.0.0",
     "prop-types": "^15.8.1",

frontend/src/conversation/ConversationBubble.tsx

@@ -53,10 +53,8 @@ const ConversationBubble = forwardRef<
     bubble = (
       <div ref={ref} className={`flex flex-row-reverse self-end ${className}`}>
         <Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
-        <div className="ml-10 mr-2 flex items-center rounded-[28px] bg-purple-30 py-[14px] px-[19px] text-white">
-          <ReactMarkdown className="whitespace-pre-wrap break-normal leading-normal">
-            {message}
-          </ReactMarkdown>
+        <div className="ml-10 mr-2 flex items-center rounded-[28px] bg-purple-30 py-[14px] px-[19px] text-white w-full whitespace-pre-wrap leading-normal break-line">
+          {message}
         </div>
       </div>
     );