configured shuffle for example list

Author: pavsingh7

app/frontend/src/components/Example/ExampleList.tsx

@@ -1,28 +1,51 @@
+import { useEffect, useState } from "react";
 import { Example } from "./Example";
-
+import { DEFAULT_EXAMPLES, GPT4V_EXAMPLES } from "../../i18n/examples.js";
 import styles from "./Example.module.css";
 
-const DEFAULT_EXAMPLES: string[] = [
-    "What is Sanlam's IT Strategy?",
-    "How was Retail Affluent's performance in 2023?",
-    "What savings products does Sanlam sell?"
-];
+// const DEFAULT_EXAMPLES: string[] = [
+//     "What is Sanlam's IT Strategy?",
+//     "How was Retail Affluent's performance in 2023?",
+//     "What savings products does Sanlam sell?"
+// ];
+
+// const GPT4V_EXAMPLES: string[] = [
+//     "Compare the impact of interest rates and GDP in financial markets.",
+//     "What is the expected trend for the S&P 500 index over the next five years? Compare it to the past S&P 500 performance",
+//     "Can you identify any correlation between oil prices and stock market trends?"
+// ];
 
-const GPT4V_EXAMPLES: string[] = [
-    "Compare the impact of interest rates and GDP in financial markets.",
-    "What is the expected trend for the S&P 500 index over the next five years? Compare it to the past S&P 500 performance",
-    "Can you identify any correlation between oil prices and stock market trends?"
-];
+const shuffleArray = (array: string[]) => {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+    return array;
+};
 
 interface Props {
     onExampleClicked: (value: string) => void;
     useGPT4V?: boolean;
 }
 
 export const ExampleList = ({ onExampleClicked, useGPT4V }: Props) => {
+    const [currentExamples, setCurrentExamples] = useState<string[]>([]);
+
+    useEffect(() => {
+        const loadExamples = () => {
+            const examples = useGPT4V ? GPT4V_EXAMPLES : DEFAULT_EXAMPLES;
+            setCurrentExamples(shuffleArray(examples).slice(0, 3));
+        };
+
+        loadExamples();
+        const intervalId = setInterval(loadExamples, 7000); // Replaced workerSetInterval
+
+        return () => clearInterval(intervalId); // Replaced workerClearInterval
+    }, [useGPT4V]);
+
     return (
         <ul className={styles.examplesNavList}>
-            {(useGPT4V ? GPT4V_EXAMPLES : DEFAULT_EXAMPLES).map((question, i) => (
+            {currentExamples.map((question, i) => (
                 <li key={i}>
                     <Example text={question} value={question} onClick={onExampleClicked} />
                 </li>

app/frontend/src/i18n/examples.ts

@@ -0,0 +1,35 @@
+export const DEFAULT_EXAMPLES = [
+    "What is Sanlam's IT Strategy?",
+    "How was Retail Affluent's performance in 2023?",
+    "What savings products does Sanlam sell?",
+    "What risk products does Sanlam sell?",
+    "What was the VNB for 2023?",
+    "What was the VNB for 2022?",
+    "How was Retail Affluent's performance in 2022?",
+    "Did Sanlam meet its 2023 targets?",
+    "What is Sanlam's target market?",
+    "What is Sanlam's target market for savings products?",
+    "What is Sanlam's target market for risk products?",
+    "What is Wealth Bonus",
+    "Which products include Wealth Bonus?",
+    "How do I maximize my Wealth Bonus?",
+    "How is Sanlam performing in the market?",
+    "What is the market share of Sanlam?",
+    "What is the market share of Sanlam in the risk market?",
+    "What is the market share of Sanlam in the savings market?",
+    "What is an endowment?",
+    "What is a retirement annuity?",
+    "What is a pension fund?",
+    "What is two pot system?",
+    "What is a unit trust?",
+    "What is a tax free savings account?",
+    "What is a living annuity?",
+    "What is a preservation fund?",
+    "What is a guaranteed annuity?"
+];
+
+export const GPT4V_EXAMPLES = [
+    "Compare the impact of interest rates and GDP in financial markets.",
+    "What is the expected trend for the S&P 500 index over the next five years? Compare it to the past S&P 500 performance",
+    "Can you identify any correlation between oil prices and stock market trends?"
+];