feat: add selected option to commands for pre-selection

backend/chainlit/types.py

@@ -336,6 +336,8 @@ class CommandDict(TypedDict):
     button: Optional[bool]
     # Whether the command will be persistent unless the user toggles it
     persistent: Optional[bool]
+    # Whether the command should be pre-selected when loaded
+    selected: Optional[bool]
 
 
 class FeedbackDict(TypedDict):

frontend/src/components/chat/MessageComposer/index.tsx

@@ -5,12 +5,13 @@ import {
   useRef,
   useState
 } from 'react';
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { v4 as uuidv4 } from 'uuid';
 
 import {
   FileSpec,
   IStep,
+  commandsState,
   useAuth,
   useChatData,
   useChatInteract,
@@ -62,7 +63,16 @@ export default function MessageComposer({
   const [selectedCommand, setSelectedCommand] = useRecoilState(
     persistentCommandState
   );
+  const commands = useRecoilValue(commandsState);
   const setChatSettingsOpen = useSetRecoilState(chatSettingsOpenState);
+
+  // Pre-select the command marked as selected by the backend
+  useEffect(() => {
+    const defaultSelected = commands.find((c) => c.selected);
+    if (defaultSelected && !selectedCommand) {
+      setSelectedCommand(defaultSelected);
+    }
+  }, [commands]);
   const [attachments, setAttachments] = useRecoilState(attachmentsState);
   const { t } = useTranslation();
 

libs/react-client/src/types/command.ts

@@ -4,4 +4,5 @@ export interface ICommand {
   description: string;
   button?: boolean;
   persistent?: boolean;
+  selected?: boolean;
 }