Добавить возможность предложить действие в уроке

GPTutor-Frontend/build.log

@@ -0,0 +1,5 @@
+
+> chat@0.0.0 build
+> cross-env GENERATE_SOURCEMAP=false craco build
+
+sh: 1: cross-env: not found

GPTutor-Frontend/src/entity/lessons/ActionSuggestion.ts

@@ -0,0 +1,9 @@
+export class ActionSuggestion {
+  text: string;
+  name: string;
+
+  constructor(text: string, name?: string) {
+    this.text = text;
+    this.name = name || text;
+  }
+}

GPTutor-Frontend/src/entity/lessons/LessonItem.ts

@@ -1,6 +1,7 @@
 import { v4 as uuid } from "uuid";
 
 import { LessonRequest } from "./LessonRequest";
+import { ActionSuggestion } from "./ActionSuggestion";
 import { UUID_V4 } from "../common";
 
 export class LessonItem {
@@ -10,7 +11,8 @@ export class LessonItem {
     public name: string,
     public paragraph: string,
     public initialRequest: LessonRequest,
-    public additionalRequests: LessonRequest[]
+    public additionalRequests: LessonRequest[],
+    public actionSuggestions: ActionSuggestion[] = []
   ) {
     this.id = uuid();
     initialRequest.name = "Стартовый вопрос";

GPTutor-Frontend/src/entity/lessons/index.ts

@@ -14,6 +14,7 @@ export * from "./ChapterItem";
 export * from "./modeType";
 export * from "./LessonItem";
 export * from "./LessonRequest";
+export * from "./ActionSuggestion";
 export * from "./lessonsItem/javascript";
 export * from "./lessonsItem/html";
 export * from "./lessonsItem/git";

GPTutor-Frontend/src/entity/lessons/lessonsItem/javascript.ts

@@ -1,5 +1,6 @@
 import { LessonItem } from "../LessonItem";
 import { LessonRequest } from "../LessonRequest";
+import { ActionSuggestion } from "../ActionSuggestion";
 
 const BasedJS = "Основы JavaScript";
 const AdvancedJS = "Продвинутый JavaScript";
@@ -20,6 +21,11 @@ const lessonJS1 = new LessonItem(
     new LessonRequest("Объясни подробнее var, укажи примеры", "Переменные var"),
     new LessonRequest("В чем отличия let от var?"),
     new LessonRequest("Когда лучше использовать let, const, var?"),
+  ],
+  [
+    new ActionSuggestion("Дай мне задание на переменные для практики", "Практическое задание"),
+    new ActionSuggestion("Покажи пример реального использования переменных", "Реальный пример"),
+    new ActionSuggestion("Объясни частые ошибки при работе с переменными", "Частые ошибки"),
   ]
 );
 
@@ -37,6 +43,10 @@ const lessonJS2 = new LessonItem(
     new LessonRequest("Объясни null в js", "null"),
     new LessonRequest("Объясни undefined в js", "undefined"),
     new LessonRequest("Объясни оператор typeof", "Оператор typeof"),
+  ],
+  [
+    new ActionSuggestion("Покажи как проверить тип переменной в разных случаях", "Проверка типов"),
+    new ActionSuggestion("Дай упражнения на приведение типов", "Упражнения на типы"),
   ]
 );
 
@@ -152,6 +162,11 @@ const lessonJS9 = new LessonItem(
       "Стрелочные функции"
     ),
     new LessonRequest("Объясни контекст функции в js", "Контекст"),
+  ],
+  [
+    new ActionSuggestion("Дай мне задачу написать функцию", "Написать функцию"),
+    new ActionSuggestion("Покажи примеры использования колбэков", "Примеры колбэков"),
+    new ActionSuggestion("Объясни как работает замыкание в функциях", "Замыкания"),
   ]
 );
 

GPTutor-Frontend/src/panels/ChatLesson/ChatLesson.tsx

@@ -8,13 +8,15 @@ import { lessonsController } from "$/entity/lessons";
 
 import { ChatLessonWriteBarBefore } from "./ChatLessonWriteBarBefore";
 import { ChatLessonAdditionalRequests } from "./ChatLessonAdditionalRequests";
+import { ChatLessonActionSuggestions } from "./ChatLessonActionSuggestions";
 
 interface IProps {
   id: string;
 }
 
 function ChatLesson({ id }: IProps) {
   const [isAdditionalOpen, setAdditionsOpen] = useState(true);
+  const [isActionSuggestionsOpen, setActionSuggestionsOpen] = useState(true);
 
   const onClickAdditional = useCallback(
     () => setAdditionsOpen((prev) => !prev),
@@ -33,6 +35,7 @@ function ChatLesson({ id }: IProps) {
   };
 
   const additionalRequests = currentLesson?.additionalRequests || [];
+  const actionSuggestions = currentLesson?.actionSuggestions || [];
   const isStopped = chatGpt.chatGptLesson.timer.isStopped$.get();
   const isTyping = chatGpt.chatGptLesson.sendCompletions$.loading.get();
   const isBlockActions = chatGpt.chatGptLesson.isBlockActions$.get();
@@ -51,13 +54,22 @@ function ChatLesson({ id }: IProps) {
           />
         }
         additionalRequest={(handleSend) => (
-          <ChatLessonAdditionalRequests
-            isStopped={isStopped}
-            additionalRequests={additionalRequests}
-            isAdditionalOpen={isAdditionalOpen}
-            handleSend={handleSend}
-            isTyping={isTyping || isBlockActions}
-          />
+          <>
+            <ChatLessonAdditionalRequests
+              isStopped={isStopped}
+              additionalRequests={additionalRequests}
+              isAdditionalOpen={isAdditionalOpen}
+              handleSend={handleSend}
+              isTyping={isTyping || isBlockActions}
+            />
+            <ChatLessonActionSuggestions
+              actionSuggestions={actionSuggestions}
+              isActionSuggestionsOpen={isActionSuggestionsOpen}
+              handleSend={handleSend}
+              isTyping={isTyping || isBlockActions}
+              isStopped={isStopped}
+            />
+          </>
         )}
         onStartChat={onStartChat}
         chatGpt={chatGpt.chatGptLesson}

GPTutor-Frontend/src/panels/ChatLesson/ChatLessonActionSuggestions/ChatLessonActionSuggestions.module.css

@@ -0,0 +1,10 @@
+.actionSuggestions {
+  display: grid;
+  gap: 8px;
+  padding: 0 12px;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+}

GPTutor-Frontend/src/panels/ChatLesson/ChatLessonActionSuggestions/ChatLessonActionSuggestions.tsx

@@ -0,0 +1,56 @@
+import React, { memo } from "react";
+import { Button, Div, HorizontalScroll, Separator } from "@vkontakte/vkui";
+
+import { ActionSuggestion } from "$/entity/lessons";
+
+import classes from "./ChatLessonActionSuggestions.module.css";
+
+interface IProps {
+  actionSuggestions: ActionSuggestion[];
+  isTyping: boolean;
+  handleSend: (value: string) => void;
+  isActionSuggestionsOpen: boolean;
+  isStopped: boolean;
+}
+
+function ChatLessonActionSuggestions({
+  actionSuggestions,
+  isActionSuggestionsOpen,
+  isTyping,
+  isStopped,
+  handleSend,
+}: IProps) {
+  if (!actionSuggestions?.length || !isActionSuggestionsOpen) return null;
+
+  return (
+    <>
+      <Separator wide />
+      <HorizontalScroll>
+        <Div
+          className={classes.actionSuggestions}
+          style={{
+            gridTemplateColumns: `repeat(${actionSuggestions?.length}, max-content)`,
+          }}
+        >
+          {actionSuggestions.map((suggestion, index) => (
+            <div key={index} className={classes.button}>
+              <Button
+                aria-label={suggestion.name}
+                disabled={isTyping || !isStopped}
+                mode="secondary"
+                size="m"
+                onClick={() => {
+                  handleSend(suggestion.text);
+                }}
+              >
+                {suggestion.name}
+              </Button>
+            </div>
+          ))}
+        </Div>
+      </HorizontalScroll>
+    </>
+  );
+}
+
+export default memo(ChatLessonActionSuggestions);

GPTutor-Frontend/src/panels/ChatLesson/ChatLessonActionSuggestions/index.ts

@@ -0,0 +1 @@
+export { default as ChatLessonActionSuggestions } from "./ChatLessonActionSuggestions";

GPTutor-Frontend/typecheck.log

@@ -0,0 +1,9 @@
+
+                                                                               
+                This is not the tsc command you are looking for                
+                                                                               
+
+To get access to the TypeScript compiler, tsc, from the command line either:
+
+- Use npm install typescript to first add TypeScript to your project before using npx
+- Use yarn to avoid accidentally running code from un-installed packages