Add example questions on the AI Coach (#518)

antoinejaussoin · Mar 29, 2023 · 724650a · 724650a
1 parent fc7dc6a
commit 724650a
Show file tree

Hide file tree

Showing 33 changed files with 243 additions and 44 deletions.
diff --git a/backend/src/ai/index.ts b/backend/src/ai/index.ts
@@ -22,6 +22,7 @@ The export functionality is located in the Summary tab, using the export button
 Users can also use the "Copy to clipboard" button to copy the summary to the clipboard.
 Users can make posts anonymous or not, change voting rules, customize the columns, encrypt sessions and make them private.
 When possible, use bullet points.
+Users can add animated images using Giphy to make their retrospective more fun.
 If the user's question is too vague, do ask clarifying questions to give a better reply.
 Always introduce yourself as an agile coach that can help users improve their online retrospectives and make the most out of Retrospected, by answering questions about agile methodology or the usage of Retrospected.
 Always end each one of your answers by suggesting to expand on some part of your answer if needed, or answer a new question.

diff --git a/frontend/package.json b/frontend/package.json
@@ -21,6 +21,7 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/react-hooks": "8.0.1",
+    "@total-typescript/ts-reset": "^0.4.2",
     "@types/crypto-js": "4.1.1",
     "@types/emoji-mart": "3.0.9",
     "@types/lodash": "4.14.191",

diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
@@ -141,7 +141,7 @@ async function registerBase(
       body: JSON.stringify(payload),
     });
     if (response.ok) {
-      const { user, loggedIn } = await response.json();
+      const { user, loggedIn } = (await response.json()) as any;
       return {
         user,
         error: null,
@@ -258,7 +258,7 @@ export async function getGiphyUrl(giphyId: string): Promise<string | null> {
       { credentials: 'omit' }
     );
     if (response.ok) {
-      const { data } = await response.json();
+      const { data } = (await response.json()) as any;
       return data && data.images ? data.images.downsized_medium.url : null;
     }
     return null;

diff --git a/frontend/src/components/EditableLabel.tsx b/frontend/src/components/EditableLabel.tsx
@@ -11,7 +11,7 @@ interface EditableLabelProps extends CenteredProp {
   multiline?: boolean;
   label?: string;
   focused?: boolean;
-  wrap?: boolean;
+  wrapText?: boolean;
   onChange: (value: string) => void;
 }
 
@@ -26,7 +26,7 @@ const EditableLabel = ({
   multiline,
   label,
   focused,
-  wrap = false,
+  wrapText = false,
   onChange,
 }: EditableLabelProps) => {
   const [editMode, setEditMode] = useState(false);
@@ -100,11 +100,11 @@ const EditableLabel = ({
           <InvisibleEditIcon fontSize="inherit" />
         </EditMode>
       ) : readOnly ? (
-        <ViewMode wrap={wrap} aria-label={label}>
+        <ViewMode wrapText={wrapText} aria-label={label}>
           <span>{current || placeholder}</span>
         </ViewMode>
       ) : (
-        <ViewMode wrap={wrap} onClick={enableEditMode}>
+        <ViewMode wrapText={wrapText} onClick={enableEditMode}>
           <span aria-label={label} data-testid={label}>
             {current || placeholder}
           </span>
@@ -120,12 +120,12 @@ export default EditableLabel;
 
 const LabelContainer = styled.span``;
 
-const ViewMode = styled.span<{ wrap: boolean }>`
+const ViewMode = styled.span<{ wrapText: boolean }>`
   display: inline-flex;
   flex-wrap: nowrap;
   align-items: center;
   > span {
-    white-space: ${(props) => (props.wrap ? 'pre-wrap' : 'nowrap')};
+    white-space: ${(props) => (props.wrapText ? 'pre-wrap' : 'nowrap')};
     line-height: 1.5;
   }
 

diff --git a/frontend/src/hooks/useStateFetch.ts b/frontend/src/hooks/useStateFetch.ts
@@ -21,7 +21,7 @@ function useStateFetch<T>(
         try {
           const response = await fetch(url);
           if (response.ok) {
-            const responseData = await response.json();
+            const responseData = (await response.json()) as T;
             setData(responseData);
             setLoading(false);
             setError(null);

diff --git a/frontend/src/translations/i18n.ts b/frontend/src/translations/i18n.ts
@@ -21,6 +21,7 @@ i18n
   .use(initReactI18next)
   .init({
     fallbackLng: config.DEFAULT_LANGUAGE,
+    returnEmptyString: false,
     debug: !isProduction(),
     defaultNS: 'ns1',
     ns: 'ns1',

diff --git a/frontend/src/translations/locales/ar-SA.json b/frontend/src/translations/locales/ar-SA.json
@@ -494,6 +494,13 @@
     "freeLimitWarning": "لقد وصلت إلى الحد الأقصى المجاني لهذا الشهر. يرجى الاشتراك في Respected Pro للحصول على تدريب غير محدود على الذاكرة.",
     "genericError": "حدث خطأ ما مع الذكاء الاصطناعي. الرجاء المحاولة مرة أخرى لاحقاً.",
     "inputPrompt": "اسألني سؤالاً",
-    "send": "إرسال"
+    "send": "إرسال",
+    "examplesTitle": "بإمكانك أيضاً أن تبدأ بسؤال أحد هذه الأسئلة",
+    "examples": [
+      "ما هو رجعي؟",
+      "• ما هي أفضل الممارسات لأثر رجعي على شبكة الإنترنت؟",
+      "كيف يمكنني أن أجعل رجعي أكثر متعة؟",
+      "كيف يمكنني جعلها أكثر انخراطاً؟"
+    ]
   }
 }
diff --git a/frontend/src/translations/locales/de-DE.json b/frontend/src/translations/locales/de-DE.json
@@ -494,6 +494,13 @@
     "freeLimitWarning": "Sie haben Ihr Gratislimit für diesen Monat erreicht. Bitte abonnieren Sie Retrospected Pro um unbegrenzte KI-Coaching zu erhalten.",
     "genericError": "Etwas ist mit der KI schief gelaufen. Bitte versuche es später erneut.",
     "inputPrompt": "Frage stellen",
-    "send": "Senden"
+    "send": "Senden",
+    "examplesTitle": "Sie können auch damit beginnen, eine dieser Fragen zu stellen",
+    "examples": [
+      "Was ist eine Rückwirkung?",
+      "Was sind die besten Praktiken für eine Online-Retrospektive?",
+      "Wie kann ich meine Retrospektive noch mehr Spaß machen?",
+      "Wie kann ich ihn engagierter gestalten?"
+    ]
   }
 }
diff --git a/frontend/src/translations/locales/en-GB.json b/frontend/src/translations/locales/en-GB.json
@@ -494,6 +494,13 @@
     "freeLimitWarning": "You have reached your free limit for this month. Please subscribe to Retrospected Pro to get unlimited AI Coaching.",
     "genericError": "Something went wrong with the AI. Please try again later.",
     "inputPrompt": "Ask me a question",
-    "send": "Send"
+    "send": "Send",
+    "examplesTitle": "You can also start by asking one of these questions",
+    "examples": [
+      "What is a retrospective?",
+      "What are the best practices for an online retrospective?",
+      "How can I make my retrospective more fun?",
+      "How can I make it more engaging?"
+    ]
   }
 }
diff --git a/frontend/src/translations/locales/es-ES.json b/frontend/src/translations/locales/es-ES.json
@@ -494,6 +494,13 @@
     "freeLimitWarning": "Has alcanzado tu límite gratuito para este mes. Por favor, suscríbete a Retrospected Pro para obtener un entrenamiento de IA ilimitado.",
     "genericError": "Algo salió mal con la IA. Inténtalo de nuevo más tarde.",
     "inputPrompt": "Hazme una pregunta",
-    "send": "Enviar"
+    "send": "Enviar",
+    "examplesTitle": "También puedes empezar haciendo una de estas preguntas",
+    "examples": [
+      "¿Qué es una retrospectiva?",
+      "¿Cuáles son las mejores prácticas para una retrospectiva en línea?",
+      "¿Cómo puedo hacer que mi retrospectiva sea más divertida?",
+      "¿Cómo puedo hacerla más interesante?"
+    ]
   }
 }
diff --git a/frontend/src/translations/locales/fr-FR.json b/frontend/src/translations/locales/fr-FR.json
@@ -494,6 +494,13 @@
     "freeLimitWarning": "Vous avez atteint votre limite gratuite ce mois-ci. En vous abonnant à Retrospected Pro, vous aurez accès au Coach Agile de manière illimitée.",
     "genericError": "Il y a quelque-chose qui cloche. Merci de recommencer plus tard.",
     "inputPrompt": "Posez-moi une question",
-    "send": "Envoyer"
+    "send": "Envoyer",
+    "examplesTitle": "Vous pouvez également commencer par poser une de ces questions",
+    "examples": [
+      "Qu'est-ce qu'une rétrospective ?",
+      "Quelles sont les meilleurs pratiques quant aux rétrospectives en ligne ?",
+      "Comment puis-je rendre ma rétrospective plus amusante?",
+      "Comment puis-je la rendre plus engageante ?"
+    ]
   }
 }
diff --git a/frontend/src/translations/locales/hu-HU.json b/frontend/src/translations/locales/hu-HU.json
@@ -494,6 +494,13 @@
     "freeLimitWarning": "",
     "genericError": "",
     "inputPrompt": "",
-    "send": ""
+    "send": "",
+    "examplesTitle": "",
+    "examples": [
+      "",
+      "",
+      "",
+      ""
+    ]
   }
 }
diff --git a/frontend/src/translations/locales/it-IT.json b/frontend/src/translations/locales/it-IT.json
@@ -494,6 +494,13 @@
     "freeLimitWarning": "Hai raggiunto il tuo limite gratuito per questo mese. Per favore iscriviti a Retrospected Pro per ottenere un allenamento AI illimitato.",
     "genericError": "Qualcosa è andato storto con l'IA. Riprova più tardi.",
     "inputPrompt": "Mi faccia una domanda",
-    "send": "Invia"
+    "send": "Invia",
+    "examplesTitle": "Si può anche iniziare facendo una di queste domande",
+    "examples": [
+      "Che cos'è una retrospettiva?",
+      "Quali sono le migliori pratiche per una retrospettiva online?",
+      "Come posso rendere la mia retrospettiva più divertente?",
+      "Come posso renderlo più coinvolgente?"
+    ]
   }
 }
diff --git a/frontend/src/translations/locales/ja-JP.json b/frontend/src/translations/locales/ja-JP.json
@@ -494,6 +494,13 @@
     "freeLimitWarning": "今月限度額に達しました。無制限のAIコーチングを受け取るには、Retrospected Proに登録してください。",
     "genericError": "AIに問題が発生しました。後でもう一度お試しください。",
     "inputPrompt": "質問してください",
-    "send": "送信"
+    "send": "送信",
+    "examplesTitle": "次のいずれかの質問から始めることもできます",
+    "examples": [
+      "振り返ってみると何ですか?",
+      "オンライン振り返りのためのベストプラクティスは何ですか?",
+      "回顧展をもっと楽しくするにはどうしたらいいですか?",
+      "どうすればもっと魅力的になれますか?"
+    ]
   }
 }
diff --git a/frontend/src/translations/locales/nl-NL.json b/frontend/src/translations/locales/nl-NL.json
@@ -494,6 +494,13 @@
     "freeLimitWarning": "U heeft uw gratis limiet voor deze maand bereikt. Abonneer u alstublieft op Retrospected Pro om een onbeperkte AI coaching te krijgen.",
     "genericError": "Er ging iets mis met de AI. Probeer het later opnieuw.",
     "inputPrompt": "Stel me een vraag",
-    "send": "Verzenden"
+    "send": "Verzenden",
+    "examplesTitle": "U kunt ook beginnen met een van deze vragen te stellen",
+    "examples": [
+      "Wat is een retrospectief?",
+      "Wat zijn de beste praktijken voor een online-retrospectie?",
+      "Hoe kan ik mijn retrospectief leuker maken?",
+      "Hoe kan ik het aantrekkelijker maken?"
+    ]
   }
 }
diff --git a/frontend/src/translations/locales/pl-PL.json b/frontend/src/translations/locales/pl-PL.json
@@ -494,6 +494,13 @@
     "freeLimitWarning": "Osiągnąłeś swój darmowy limit na ten miesiąc. Proszę subskrybuj Retrospected Pro, aby uzyskać nieograniczoną liczbę trenerów AI.",
     "genericError": "Coś poszło nie tak z AI. Spróbuj ponownie później.",
     "inputPrompt": "Zadaj mi pytanie",
-    "send": "Wyślij"
+    "send": "Wyślij",
+    "examplesTitle": "Możesz również zacząć od zadawania jednego z tych pytań",
+    "examples": [
+      "Czym jest retrospektywność?",
+      "Jakie są najlepsze praktyki w zakresie retrospektywnego stosowania internetu?",
+      "Jak mogę sprawić, by moja retrospektywność była bardziej zabawna?",
+      "Jak mogę sprawić, by był bardziej zaangażowany?"
+    ]
   }
 }
diff --git a/frontend/src/translations/locales/pt-BR.json b/frontend/src/translations/locales/pt-BR.json
@@ -494,6 +494,13 @@
     "freeLimitWarning": "Você atingiu seu limite gratuito para este mês. Inscreva-se no Retrospected Pro para obter tutela IA ilimitada.",
     "genericError": "Algo deu errado com AI. Por favor, tente novamente mais tarde.",
     "inputPrompt": "Faça uma pergunta para mim",
-    "send": "Mandar"
+    "send": "Mandar",
+    "examplesTitle": "Você também pode começar fazendo uma dessas perguntas",
+    "examples": [
+      "O que é um retrospectivo?",
+      "Quais são as melhores práticas para um retrocesso na Internet?",
+      "Como posso fazer meu retrospectivo mais divertido?",
+      "Como posso fazer isso mais envolvente?"
+    ]
   }
 }
diff --git a/frontend/src/translations/locales/pt-PT.json b/frontend/src/translations/locales/pt-PT.json
@@ -494,6 +494,13 @@
     "freeLimitWarning": "Você atingiu seu limite gratuito para este mês. Inscreva-se no Retrospected Pro para obter tutela IA ilimitada.",
     "genericError": "Algo deu errado com AI. Por favor, tente novamente mais tarde.",
     "inputPrompt": "Faça uma pergunta para mim",
-    "send": "Mandar"
+    "send": "Mandar",
+    "examplesTitle": "Você também pode começar fazendo uma dessas perguntas",
+    "examples": [
+      "O que é um retrospectivo?",
+      "Quais são as melhores práticas para um retrocesso na Internet?",
+      "Como posso fazer meu retrospectivo mais divertido?",
+      "Como posso fazer isso mais envolvente?"
+    ]
   }
 }
diff --git a/frontend/src/translations/locales/uk-UA.json b/frontend/src/translations/locales/uk-UA.json
@@ -494,6 +494,13 @@
     "freeLimitWarning": "Ви досягли свого безкоштовного ліміту на цей місяць. Будь ласка, підпишіться на Retrospected Pro, щоб отримати необмежену кількість запитів на харчування.",
     "genericError": "Щось пішло не так з AI. Будь ласка, спробуйте ще раз пізніше.",
     "inputPrompt": "Задати мені питання",
-    "send": "Відправити"
+    "send": "Відправити",
+    "examplesTitle": "Можна почати, задавши одне з цих запитань",
+    "examples": [
+      "Що таке ретроспектива?",
+      "Які найкращі практики є онлайн-ретроспективу?",
+      "Як я можу зробити свою ретроспективу більш веселою?",
+      "Як зробити його більш захоплюючим?"
+    ]
   }
 }
diff --git a/frontend/src/translations/locales/zh-CN.json b/frontend/src/translations/locales/zh-CN.json
@@ -494,6 +494,13 @@
     "freeLimitWarning": "您已达到本月的免费上限。请订阅Retroscripted Pro 以获得无限的 AI Coaching。",
     "genericError": "AI出了错。请稍后再试。",
     "inputPrompt": "问我一个问题",
-    "send": "发送"
+    "send": "发送",
+    "examplesTitle": "您也可以通过询问其中一个问题开始",
+    "examples": [
+      "什么是追溯性的？",
+      "网上回顾的最佳做法是什么？",
+      "如何使我的回顾更加有趣？",
+      "我如何才能使它更多地参与？"
+    ]
   }
 }
diff --git a/frontend/src/translations/locales/zh-TW.json b/frontend/src/translations/locales/zh-TW.json
@@ -494,6 +494,13 @@
     "freeLimitWarning": "",
     "genericError": "",
     "inputPrompt": "",
-    "send": ""
+    "send": "",
+    "examplesTitle": "",
+    "examples": [
+      "",
+      "",
+      "",
+      ""
+    ]
   }
 }
diff --git a/frontend/src/ts-reset.d.ts b/frontend/src/ts-reset.d.ts
@@ -0,0 +1 @@
+import '@total-typescript/ts-reset';
diff --git a/frontend/src/views/account/AccountPage.tsx b/frontend/src/views/account/AccountPage.tsx
@@ -141,7 +141,7 @@ function AccountPage() {
                 {[user.planOwnerEmail, ...(user.planAdmins || [])]
                   .filter(Boolean)
                   .map((email, i) => (
-                    <Tag key={i} value={email as string} />
+                    <Tag key={i} value={email} />
                   ))}
               </Value>
             </Data>

diff --git a/frontend/src/views/game/board/Group.tsx b/frontend/src/views/game/board/Group.tsx
@@ -63,7 +63,7 @@ export default function Group({
           <Header collapsed={collapsed}>
             <Label>
               <EditableLabel
-                wrap
+                wrapText
                 value={decrypt(group.label)}
                 onChange={handleEditLabel}
                 readOnly={readonly}

diff --git a/frontend/src/views/game/board/header/BoardHeader.tsx b/frontend/src/views/game/board/header/BoardHeader.tsx
@@ -145,7 +145,7 @@ function BoardHeader({
             style={{ fontWeight: 300 }}
           >
             <EditableLabel
-              wrap
+              wrapText
               placeholder={t('SessionName.defaultSessionName')!}
               value={decrypt(session.name)}
               centered

diff --git a/frontend/src/views/game/board/post/Post.tsx b/frontend/src/views/game/board/post/Post.tsx
@@ -196,7 +196,7 @@ const PostItem = ({
               <LabelContainer blurred={isBlurred}>
                 <Typography variant="body1">
                   <EditableLabel
-                    wrap
+                    wrapText
                     readOnly={readOnly}
                     value={actualContent}
                     onChange={handleEdit}
@@ -237,7 +237,7 @@ const PostItem = ({
                 <Typography variant="caption">{t('Actions.title')}:</Typography>
                 <Typography variant="body1">
                   <EditableLabel
-                    wrap
+                    wrapText
                     value={decrypt(post.action || '')}
                     onChange={handleEditAction}
                     label={t('Actions.title')!}