Merge branch 'master' into leaderboard

Author: martin-henz

package.json

@@ -135,7 +135,7 @@
     "@types/xml2js": "^0.4.11",
     "babel-jest": "^29.7.0",
     "buffer": "^6.0.3",
-    "canvas": "^2.11.2",
+    "canvas": "^3.1.0",
     "constants-browserify": "^1.0.0",
     "coveralls": "^3.1.1",
     "cross-env": "^7.0.3",
@@ -162,7 +162,7 @@
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "timers-browserify": "^2.0.12",
-    "typescript": "^5.5.3",
+    "typescript": "^5.8.2",
     "typescript-eslint": "^8.1.0",
     "url": "^0.11.1",
     "webpack-bundle-analyzer": "^4.9.0"

src/features/game/dialogue/GameDialogueGenerator.ts

@@ -14,7 +14,7 @@ export default class DialogueGenerator {
    */
   public constructor(dialogueContent: DialogueObject) {
     this.dialogueContent = dialogueContent;
-    this.currPart = dialogueContent.keys().next().value;
+    this.currPart = dialogueContent.keys().next().value || '';
     this.currLineNum = 0;
   }
 

src/pages/login/LoginVscodeCallback.tsx

@@ -0,0 +1,52 @@
+import { Card, Classes, Elevation, NonIdealState, Spinner, SpinnerSize } from '@blueprintjs/core';
+import classNames from 'classnames';
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { useLocation, useNavigate } from 'react-router';
+import SessionActions from 'src/commons/application/actions/SessionActions';
+import { parseQuery } from 'src/commons/utils/QueryHelper';
+import classes from 'src/styles/Login.module.scss';
+
+const LoginVscodeCallback: React.FC = () => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const { t } = useTranslation('login');
+
+  const { access_token: accessToken, refresh_token: refreshToken } = parseQuery(location.search);
+
+  useEffect(() => {
+    if (accessToken && refreshToken) {
+      dispatch(
+        SessionActions.setTokens({
+          accessToken: accessToken,
+          refreshToken: refreshToken
+        })
+      );
+      dispatch(SessionActions.fetchUserAndCourse());
+      navigate('/welcome');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className={classNames(classes['Login'], Classes.DARK)}>
+      <Card elevation={Elevation.FOUR}>
+        <div>
+          <NonIdealState
+            description={t('Logging In')}
+            icon={<Spinner size={SpinnerSize.LARGE} />}
+          />
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+// react-router lazy loading
+// https://reactrouter.com/en/main/route/lazy
+export const Component = LoginVscodeCallback;
+Component.displayName = 'LoginVscodeCallback';
+
+export default LoginVscodeCallback;

src/pages/sicp/subcomponents/chatbot/ChatBox.tsx

@@ -32,6 +32,7 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
   const [chatId, setChatId] = useState<string>();
   const [messages, setMessages] = useState<ChatMessage[]>([INITIAL_MESSAGE]);
   const [userInput, setUserInput] = useState('');
+  const [maxContentSize, setMaxContentSize] = useState(1000);
   const tokens = useTokens();
 
   const handleUserInput = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -56,7 +57,7 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
       .finally(() => {
         setIsLoading(false);
       });
-  }, [chatId, tokens, userInput]);
+  }, [chatId, tokens, userInput, maxContentSize]);
 
   const keyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(
     e => {
@@ -71,8 +72,11 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
     initChat(tokens, getSection(), getText()).then(resp => {
       const message = resp.response;
       const conversationId = resp.conversationId;
+      const maxMessageSize = resp.maxContentSize;
       setMessages([message]);
+      setMaxContentSize(maxMessageSize);
       setChatId(conversationId);
+      setUserInput('');
     });
   }, [getSection, getText, tokens]);
 
@@ -100,22 +104,29 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
         ))}
         {isLoading && <p>loading...</p>}
       </div>
-      <input
-        type="text"
-        disabled={isLoading}
-        className={classes['user-input']}
-        placeholder={isLoading ? 'Waiting for response...' : 'Type your message here...'}
-        value={userInput}
-        onChange={handleUserInput}
-        onKeyDown={keyDown}
-      />
-      <div className={classes['button-container']}>
-        <Button disabled={isLoading} className={classes['button-send']} onClick={sendMessage}>
-          Send
-        </Button>
-        <Button className={classes['button-clean']} onClick={resetChat}>
-          Clean
-        </Button>
+      <div className={classes['control-container']}>
+        <input
+          type="text"
+          disabled={isLoading}
+          className={classes['user-input']}
+          placeholder={isLoading ? 'Waiting for response...' : 'Type your message here...'}
+          value={userInput}
+          onChange={handleUserInput}
+          onKeyDown={keyDown}
+          maxLength={maxContentSize}
+        />
+        <div className={classes['input-count-container']}>
+          <div className={classes['input-count']}>{`${userInput.length}/${maxContentSize}`}</div>
+        </div>
+
+        <div className={classes['button-container']}>
+          <Button disabled={isLoading} className={classes['button-send']} onClick={sendMessage}>
+            Send
+          </Button>
+          <Button className={classes['button-clean']} onClick={resetChat}>
+            Clean
+          </Button>
+        </div>
       </div>
     </div>
   );

src/pages/sicp/subcomponents/chatbot/types.tsx

@@ -6,6 +6,7 @@ type ChatMessage = {
 type InitChatResponse = {
   response: ChatMessage;
   conversationId: string;
+  maxContentSize: number;
 };
 
 type ContinueChatResponse = {

src/routes/routerConfig.tsx

@@ -25,6 +25,7 @@ import { GuardedRoute } from './routeGuard';
 const Login = () => import('../pages/login/Login');
 const LoginPage = () => import('../pages/login/LoginPage');
 const LoginCallback = () => import('../pages/login/LoginCallback');
+const LoginVscodeCallback = () => import('../pages/login/LoginVscodeCallback');
 const NusLogin = () => import('../pages/login/NusLogin');
 const Contributors = () => import('../pages/contributors/Contributors');
 const GitHubCallback = () => import('../pages/githubCallback/GitHubCallback');
@@ -128,7 +129,10 @@ export const getFullAcademyRouterConfig = ({
         {
           path: 'login',
           lazy: Login,
-          children: [{ path: 'callback', lazy: LoginCallback }]
+          children: [
+            { path: 'callback', lazy: LoginCallback },
+            { path: 'vscode_callback', lazy: LoginVscodeCallback }
+          ]
         },
         { path: 'welcome', lazy: Welcome, loader: welcomeLoader },
         { path: 'courses', element: <Navigate to="/" /> },

src/styles/Chatbot.module.scss

@@ -6,6 +6,24 @@
   z-index: 1000;
 }
 
+.chat-container {
+  position: relative;
+  width: 400px;
+  height: 450px;
+  border-radius: 5px;
+  background-color: #f1f1f1;
+  padding: 16px;
+  z-index: 1000;
+}
+
+.control-container {
+  display: flex;
+  flex-direction: column;
+  & > :first-child {
+    margin-top: 10px;
+  }
+}
+
 .bot-area {
   position: relative;
 }
@@ -50,16 +68,6 @@
   border-radius: 50%;
 }
 
-.chat-container {
-  position: relative;
-  width: 400px;
-  height: 450px;
-  border-radius: 5px;
-  background-color: #f1f1f1;
-  padding: 16px;
-  z-index: 1000;
-}
-
 .chat-message {
   height: 80%;
   border: 1px solid #ddd;
@@ -82,11 +90,12 @@
   background-color: #a3a3a4;
   color: #fff;
   font-size: 15px;
-  text-align: right;
+  text-align: left;
   padding: 10px;
   line-height: 1.5;
   border-radius: 10px;
   display: block;
+  margin-bottom: 5px;
 }
 
 .assistant {
@@ -98,6 +107,7 @@
   line-height: 1.5;
   border-radius: 10px;
   display: block;
+  margin-bottom: 10px;
 }
 
 .button-container {
@@ -130,3 +140,18 @@
   border-radius: 10px;
   vertical-align: top;
 }
+
+.input-count-container {
+  justify-content: flex-end;
+  display: flex;
+  align-items: center;
+  height: 20px;
+}
+.input-count {
+  font-size: 10px;
+  color: #666;
+  margin: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}

src/styles/_achievementdashboard.scss

@@ -629,7 +629,7 @@
         color: white;
         display: flex;
         flex-direction: column;
-        height: $view-height / 3;
+        height: calc($view-height / 3);
         justify-content: center;
         margin: 1em auto;
         width: $view-width;