From 672d12bf856d6a692e6bd796c1968492de67106f Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 21 Jan 2025 00:07:54 +0100
Subject: [PATCH] feat: Enhance conversation starters functionality with
 randomization and increase max limit

---
 client/src/components/Chat/Landing.tsx        | 29 ++++++++++++-------
 .../ui/AgentConversationStarters.tsx          |  1 +
 packages/data-provider/src/config.ts          |  2 +-
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Chat/Landing.tsx b/client/src/components/Chat/Landing.tsx
index f1afc0613..c1da2cb08 100644
--- a/client/src/components/Chat/Landing.tsx
+++ b/client/src/components/Chat/Landing.tsx
@@ -12,6 +12,16 @@ import { TooltipAnchor } from '~/components/ui';
 import { BirthdayIcon } from '~/components/svg';
 import ConvoStarter from './ConvoStarter';
 
+const getSequentialFromRandom = (arr: string[], count: number) => {
+  if (arr.length <= count) {
+    return arr;
+  }
+
+  const maxStartIndex = arr.length - count;
+  const startIndex = Math.floor(Math.random() * (maxStartIndex + 1));
+  return arr.slice(startIndex, startIndex + count);
+};
+
 export default function Landing({ Header }: { Header?: ReactNode }) {
   const { conversation } = useChatContext();
   const { data: agentData } = useGetAgentByIdQuery(conversation?.agent_id ?? '', {
@@ -95,6 +105,11 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
     return localize('com_nav_welcome_message');
   };
 
+  const randomizedStarters = useMemo(
+    () => getSequentialFromRandom(conversation_starters, 4),
+    [conversation_starters],
+  );
+
   return (
     <div className="relative h-full">
       <div className="absolute left-0 right-0">{Header != null ? Header : null}</div>
@@ -135,16 +150,10 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
           </h2>
         )}
         <div className="mt-8 flex flex-wrap justify-center gap-3 px-4">
-          {conversation_starters.length > 0 &&
-            conversation_starters
-              .slice(0, Constants.MAX_CONVO_STARTERS)
-              .map((text: string, index: number) => (
-                <ConvoStarter
-                  key={index}
-                  text={text}
-                  onClick={() => sendConversationStarter(text)}
-                />
-              ))}
+          {randomizedStarters.length > 0 &&
+            randomizedStarters.map((text: string, index: number) => (
+              <ConvoStarter key={index} text={text} onClick={() => sendConversationStarter(text)} />
+            ))}
         </div>
       </div>
     </div>
diff --git a/client/src/components/ui/AgentConversationStarters.tsx b/client/src/components/ui/AgentConversationStarters.tsx
index c67b5252d..6d9a3bc9c 100644
--- a/client/src/components/ui/AgentConversationStarters.tsx
+++ b/client/src/components/ui/AgentConversationStarters.tsx
@@ -23,6 +23,7 @@ export default function AgentConversationStarters({
   const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
   const [dragIndex, setDragIndex] = useState<number | null>(null);
   const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(true);
 
   useEffect(() => {
     if (field.value.length === 0) {
diff --git a/packages/data-provider/src/config.ts b/packages/data-provider/src/config.ts
index 12885be57..ede638bf9 100644
--- a/packages/data-provider/src/config.ts
+++ b/packages/data-provider/src/config.ts
@@ -1151,7 +1151,7 @@ export enum Constants {
   /** Saved Tag */
   SAVED_TAG = 'Saved',
   /** Max number of Conversation starters for Agents/Assistants */
-  MAX_CONVO_STARTERS = 4,
+  MAX_CONVO_STARTERS = 64,
   /** Global/instance Project Name */
   GLOBAL_PROJECT_NAME = 'instance',
   /** Delimiter for MCP tools */