[AIBOTS-4] PLU-599 (chore): improve aibots action frontend

packages/backend/src/apps/aibots/actions/send-query/index.ts

@@ -12,12 +12,13 @@ import { parametersSchema } from './schema'
 const action: IRawAction = {
   name: 'Send Query',
   key: 'sendQuery',
-  description: 'Sends a query to your customised AI Bot',
+  description: 'Sends a query to one of your bots on AIBots',
   arguments: [
     {
-      label: 'Query',
+      label: 'What do you want to ask your bot?',
+      placeholder: 'Summarise this form response and flag anything urgent',
       key: 'query',
-      type: 'string' as const,
+      type: 'multiline' as const,
       required: true,
       variables: true,
     },

packages/backend/src/apps/aibots/auth/index.ts

@@ -9,7 +9,8 @@ const auth: IUserAddedConnectionAuth = {
   fields: [
     {
       key: 'screenName',
-      label: 'Label',
+      label: 'Nickname',
+      description: "It does not need to match your bot's name on AIBots.",
       type: 'string' as const,
       required: true,
       readOnly: false,

packages/backend/src/apps/aibots/index.ts

@@ -8,7 +8,7 @@ import queue from './queue'
 const app: IApp = {
   name: 'AIBots',
   key: 'aibots',
-  description: 'Integrate with your customised AI Bot',
+  description: 'Send a query to one of your bots on AIBots',
   iconUrl: '{BASE_URL}/apps/aibots/assets/favicon.svg',
   authDocUrl: '',
   baseUrl: 'https://aibots.gov.sg',

packages/frontend/src/components/InputCreator/index.tsx

@@ -171,6 +171,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
           autoFocus={autoFocus}
           singleVariableSelection={schema.singleVariableSelection}
           noVariablesMessage={noVariablesMessage}
+          isMultiline={type === 'multiline'}
         />
       )
     }

packages/frontend/src/components/RichTextEditor/index.tsx

@@ -104,6 +104,7 @@ interface EditorProps {
   singleVariableSelection?: boolean
   noVariablesMessage?: string
   customRteMenuOptions?: TRteMenuOption[]
+  isMultiline?: boolean
 }
 const Editor = ({
   onChange,
@@ -120,6 +121,7 @@ const Editor = ({
   autoFocus = false,
   noVariablesMessage,
   customRteMenuOptions,
+  isMultiline,
 }: EditorProps) => {
   const { priorExecutionSteps } = useContext(StepExecutionsContext)
   const { stepIdToOrder } = useContext(StepsToDisplayContext)
@@ -213,7 +215,8 @@ const Editor = ({
     // To simulate textarea and coordinate with dropdown input size
     onCreate: ({ editor }) => {
       const editorElement = editor.view.dom as HTMLElement
-      editorElement.style.minHeight = isRich ? '9rem' : '2.625rem' // Set initial minHeight directly
+      editorElement.style.minHeight =
+        isRich || isMultiline ? '9rem' : '2.625rem' // Set initial minHeight directly
       editorElement.style.maxHeight = isSingleLine ? '2.625rem' : ''
     },
     editorProps: {
@@ -384,6 +387,7 @@ interface RichTextEditorProps {
   singleVariableSelection?: boolean
   noVariablesMessage?: string
   customRteMenuOptions?: TRteMenuOption[]
+  isMultiline?: boolean
 }
 const RichTextEditor = ({
   required,
@@ -402,6 +406,7 @@ const RichTextEditor = ({
   singleVariableSelection,
   noVariablesMessage,
   customRteMenuOptions,
+  isMultiline,
 }: RichTextEditorProps) => {
   const { readOnly } = useContext(EditorContext)
   const { control, getValues } = useFormContext()
@@ -452,6 +457,7 @@ const RichTextEditor = ({
             singleVariableSelection={singleVariableSelection}
             noVariablesMessage={noVariablesMessage}
             customRteMenuOptions={customRteMenuOptions}
+            isMultiline={isMultiline}
           />
         )}
       />