fix: add comment component and upgrade models (#308)

Author: spaenleh

eslint.config.mjs

@@ -132,6 +132,7 @@ export default [
         'error',
         {
           allowExpressions: true,
+          allowFunctionsWithoutTypeParameters: true,
           allowHigherOrderFunctions: true,
           allowTypedFunctionExpressions: true,
         },

package.json

@@ -15,7 +15,7 @@
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
     "@graasp/apps-query-client": "3.7.5",
-    "@graasp/sdk": "5.13.3",
+    "@graasp/sdk": "github:graasp/graasp-sdk#add-chatbot-export",
     "@graasp/ui": "5.5.4",
     "@mui/icons-material": "6.4.12",
     "@mui/lab": "6.0.0-dev.240424162023-9968b4889d",

src/constants.ts

@@ -1,7 +1,7 @@
 import { GPTVersion } from '@graasp/sdk';
 
 export const DEFAULT_BOT_USERNAME = 'Graasp Bot';
-export const DEFAULT_MODEL_VERSION = GPTVersion.GPT_3_5_TURBO;
+export const DEFAULT_MODEL_VERSION = GPTVersion.GPT_4_O_MINI;
 export const ANONYMOUS_USER = 'Anonymous';
 
 // UI

src/langs/en.json

@@ -64,9 +64,12 @@
     "SEARCH_BY_OTHER_KEYWORDS": "Search by other keywords or regex",
     "CHECK_WHOLE_CHAT": "Check the whole chat",
     "MODEL_VERSION": "Model version",
-    "GPT_3_5_TURBO_DESCRIPTION": "Optimized for speed and efficiency, suitable for applications where quick interactions are needed.",
+    "GPT_3_5_TURBO_DESCRIPTION": "Best for basic chat and non-chat tasks where legacy compatibility is needed",
     "GPT_4_DESCRIPTION": "Features deeper learning and more comprehensive knowledge, ideal for content creation and technical support.",
-    "GPT_4_TURBO_DESCRIPTION": "Combines the depth of GPT-4 with enhanced speed, perfect for high-demand scenarios.",
+    "GPT_4_TURBO_DESCRIPTION": "Best for high-intelligence tasks where you want a proven, older flagship model",
+    "GPT_4_1_NANO_DESCRIPTION": "Best for ultra-fast tasks where average intelligence is sufficient",
+    "GPT_4_O_DESCRIPTION": "Best for high-intelligence, versatile applications requiring top performance and flexibility",
+    "GPT_4_O_MINI_DESCRIPTION": "Best for fast, focused tasks where efficiency matters most",
     "CHATBOT_MODEL_VERSION_HELPER": "This defines the  model that will be used. The default is: {{default}}.",
     "RECOMMENDED": "Recommended"
   }

src/modules/App.tsx

@@ -8,7 +8,7 @@ import AnalyticsView from './main/AnalyticsView';
 import BuilderView from './main/BuilderView';
 import PlayerView from './main/PlayerView';
 
-const App = (): JSX.Element => {
+function App(): JSX.Element {
   const context = useLocalContext();
 
   useEffect(() => {
@@ -30,6 +30,6 @@ const App = (): JSX.Element => {
     default:
       return <PlayerView />;
   }
-};
+}
 
 export default App;

src/modules/Root.tsx

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { ToastContainer } from 'react-toastify';
 
@@ -70,7 +69,7 @@ const RootDiv = styled('div')({
   height: '100%',
 });
 
-const Root: FC = () => {
+function Root() {
   const [mockContext, setMockContext] = useObjectState(defaultMockContext);
 
   return (
@@ -121,6 +120,6 @@ const Root: FC = () => {
       </StyledEngineProvider>
     </RootDiv>
   );
-};
+}
 
 export default Root;

src/modules/analytics/FrequentWords.tsx

@@ -29,10 +29,10 @@ type Props = {
   allWords: { [key: string]: number };
 };
 
-const FrequentWords = ({
+function FrequentWords({
   commentsByUserSide,
   allWords,
-}: Props): JSX.Element => {
+}: Readonly<Props>): JSX.Element {
   const { t } = useTranslation();
 
   const mostFrequentWordsWithCount = getTopFrequentWords(allWords, 5);
@@ -162,6 +162,6 @@ const FrequentWords = ({
       </Grid2>
     </Stack>
   );
-};
+}
 
 export default FrequentWords;

src/modules/analytics/StatisticCard.tsx

@@ -7,21 +7,28 @@ type Props = {
   id?: string;
 };
 
-const StatisticCard = ({ icon, title, children, id }: Props): JSX.Element => (
-  <Stack
-    height="100%"
-    component={Paper}
-    p={2}
-    variant="outlined"
-    direction="row"
-    alignItems="center"
-    id={id}
-  >
-    {icon}
-    <Stack flexGrow={1} direction="column" alignItems="center">
-      <Typography align="center">{title}</Typography>
-      {children}
+function StatisticCard({
+  icon,
+  title,
+  children,
+  id,
+}: Readonly<Props>): JSX.Element {
+  return (
+    <Stack
+      height="100%"
+      component={Paper}
+      p={2}
+      variant="outlined"
+      direction="row"
+      alignItems="center"
+      id={id}
+    >
+      {icon}
+      <Stack flexGrow={1} direction="column" alignItems="center">
+        <Typography align="center">{title}</Typography>
+        {children}
+      </Stack>
     </Stack>
-  </Stack>
-);
+  );
+}
 export default StatisticCard;

src/modules/analytics/WordCloud.tsx

@@ -9,7 +9,11 @@ type Props = {
   open: boolean;
   onClose: () => void;
 };
-const WordCloud = ({ wordCounts, open, onClose }: Props): JSX.Element => {
+function WordCloud({
+  wordCounts,
+  open,
+  onClose,
+}: Readonly<Props>): JSX.Element {
   const words = Object.entries(wordCounts).map(([text, value]) => ({
     text,
     value,
@@ -26,6 +30,6 @@ const WordCloud = ({ wordCounts, open, onClose }: Props): JSX.Element => {
       <ReactWordcloud words={words} options={options} size={[600, 400]} />
     </Dialog>
   );
-};
+}
 
 export default WordCloud;

src/modules/comment/ToolbarButton.tsx

@@ -1,4 +1,4 @@
-import { ForwardRefRenderFunction, PropsWithChildren, forwardRef } from 'react';
+import { ForwardedRef, PropsWithChildren, forwardRef } from 'react';
 
 import { Button } from '@mui/material';
 
@@ -8,10 +8,7 @@ type Props = {
   disabled?: boolean;
 };
 
-const ToolbarButton: ForwardRefRenderFunction<
-  HTMLButtonElement,
-  PropsWithChildren<Props>
-> = (props, ref) => {
+function ToolbarButton(props: Props, ref: ForwardedRef<HTMLButtonElement>) {
   // structure the custom props from the other ones given by the tooltip
   const { dataCy, onClick, disabled, ...otherProps } = props;
   return (
@@ -32,7 +29,7 @@ const ToolbarButton: ForwardRefRenderFunction<
       onClick={onClick}
     />
   );
-};
+}
 
 export default forwardRef<HTMLButtonElement, PropsWithChildren<Props>>(
   ToolbarButton,