chore: update react packages

package.json

@@ -21,9 +21,11 @@
     "@mui/lab": "6.0.0-dev.240424162023-9968b4889d",
     "@mui/material": "6.5.0",
     "@sentry/react": "10.26.0",
-    "@tanstack/react-query": "4.39.2",
-    "@tanstack/react-query-devtools": "4.39.2",
+    "@tanstack/react-query": "4.40.1",
+    "@tanstack/react-query-devtools": "4.40.1",
     "@uiw/react-codemirror": "4.23.13",
+    "@visx/scale": "3.12.0",
+    "@visx/wordcloud": "3.12.0",
     "date-fns": "4.1.0",
     "file-saver": "2.0.5",
     "i18next": "24.2.3",
@@ -32,13 +34,12 @@
     "lodash.groupby": "4.6.0",
     "lucide-react": "0.515.0",
     "prism-react-renderer": "2.4.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-i18next": "15.5.3",
     "react-markdown": "9.1.0",
     "react-mde": "12.0.8",
     "react-toastify": "11.0.5",
-    "react-wordcloud": "1.2.7",
     "remark-breaks": "4.0.0",
     "remark-gfm": "4.0.1",
     "stopword": "3.1.5"

src/modules/analytics/WordCloud.tsx

@@ -1,15 +1,24 @@
-import type { MinMaxPair } from 'react-wordcloud';
-import ReactWordcloud from 'react-wordcloud';
-
 import { Dialog } from '@mui/material';
 
+import { scaleLog } from '@visx/scale';
+import { Wordcloud as VWordCloud } from '@visx/wordcloud';
+
 import { ANALYTICS_WORDS_CLOUD_MODAL_ID } from '@/config/selectors';
 
+type WordData = {
+  text: string;
+  value: number;
+};
+
+const colors = ['#143059', '#2F6B9A', '#82a6c2'];
+const fixedValueGenerator = () => 0.5;
+
 type Props = {
   wordCounts: { [key: string]: number };
   open: boolean;
   onClose: () => void;
 };
+
 function WordCloud({
   wordCounts,
   open,
@@ -20,15 +29,43 @@ function WordCloud({
     value,
   }));
 
-  const options = {
-    fontSizes: [20, 50] as MinMaxPair,
-    rotations: 2.5,
-    rotationAngles: [0, 45] as [number, number],
-  };
+  const fontScale = scaleLog({
+    domain: [
+      Math.min(...words.map((w) => w.value)),
+      Math.max(...words.map((w) => w.value)),
+    ],
+    range: [20, 50],
+  });
+  const fontSizeSetter = (datum: WordData) => fontScale(datum.value);
 
   return (
     <Dialog open={open} onClose={onClose} id={ANALYTICS_WORDS_CLOUD_MODAL_ID}>
-      <ReactWordcloud words={words} options={options} size={[600, 400]} />
+      <VWordCloud
+        words={words}
+        width={600}
+        height={400}
+        fontSize={fontSizeSetter}
+        font="Nunito"
+        padding={2}
+        spiral="archimedean"
+        rotate={0}
+        random={fixedValueGenerator}
+      >
+        {(cloudWords) =>
+          cloudWords.map((w, i) => (
+            <text
+              key={w.text}
+              color={colors[i % colors.length]}
+              textAnchor={'middle'}
+              transform={`translate(${w.x}, ${w.y}) rotate(${w.rotate})`}
+              fontSize={w.size}
+              fontFamily={w.font}
+            >
+              {w.text}
+            </text>
+          ))
+        }
+      </VWordCloud>
     </Dialog>
   );
 }

src/modules/common/useSendMessage.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 
+import { AppActionsType } from '@/config/appActions';
 import { AppDataTypes } from '@/config/appData';
 import { mutations } from '@/config/queryClient';
 
@@ -10,6 +11,7 @@ import { mutations } from '@/config/queryClient';
 export const useSendMessage = () => {
   const { mutateAsync: postAppDataAsync, isLoading } =
     mutations.usePostAppData();
+  const { mutateAsync: postAppActionAsync } = mutations.usePostAppAction();
 
   const sendMessage = useCallback(
     async (newUserComment: string) => {
@@ -21,9 +23,14 @@ export const useSendMessage = () => {
         type: AppDataTypes.UserComment,
       });
 
+      await postAppActionAsync({
+        type: AppActionsType.Reply,
+        data: { content: newUserComment },
+      });
+
       return userMessage;
     },
-    [postAppDataAsync],
+    [postAppDataAsync, postAppActionAsync],
   );
 
   return { sendMessage, isLoading };