feat(ui): add starter prompts (#959)

Signed-off-by: Petr Kadlec <petr@puradesign.cz>

Author: kapetr

agents/a2a-ui-test/hello/src/extensions.py

@@ -26,6 +26,7 @@ def __init__(self, ui_type: str, user_greeting: str, display_name: str, tools: l
                 "links": [{"type": "source-code", "url":"https://github.com/i-am-bee/beeai-platform"}],
                 "author": { "name": 'Tomas Weiss', "email": "Tomas.Weiss@ibm.com"},
                 "contributors": [{ "name": 'Petr Kadlec', "email": "petr.kadlec@ibm.com", "url": "https://research.ibm.com/" },{ "name": "Petr Bulánek", "email": "petr.bulanek@ibm.com" }],
-                "documentation": "This is *content* of documentation field in `beeai_ui` agent ~extension~."
+                "documentation": "This is *content* of documentation field in `beeai_ui` agent ~extension~.",
+                "prompt_suggestions":['Write a research report about Generative AI','Should I buy Apple stock now?','Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor. This is what a long query would look like, 2 lines maximum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor. This is what a long query would look like, 2 lines maximum...','What is the meaning of life?','Tell me a joke','What is the capital of France?','How do I make a cake?']
             }
         )

apps/beeai-ui/src/components/TextAreaAutoHeight/TextAreaAutoHeight.tsx

@@ -49,7 +49,8 @@ export const TextAreaAutoHeight = forwardRef<HTMLTextAreaElement, Props>(functio
     updateOverflowValue();
   }, [updateOverflowValue]);
 
-  // This is necessary for the auto height to work properly. React does some optimization and ignores custom Event dispatch if the value is unchanged, which happens with react-hook-form.
+  // This is necessary for the auto height to work properly. React does some optimization and ignores custom Event dispatch
+  //  if the value is unchanged, which happens with react-hook-form.
   useEffect(() => {
     const element = textareaRef.current;
 

apps/beeai-ui/src/modules/agents/api/types.ts

@@ -42,6 +42,7 @@ export interface UIExtensionParams {
   links?: AgentLink[];
   author?: AgentAuthor;
   contributors?: AgentContributor[];
+  prompt_suggestions?: string[];
 }
 
 export const AGENT_EXTENSION_UI_KEY = 'beeai_ui';

apps/beeai-ui/src/modules/runs/chat/ChatInput.tsx

@@ -10,6 +10,7 @@ import { memo, useCallback, useRef } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import { useFileUpload } from '#modules/files/contexts/index.ts';
+import { useMessages } from '#modules/messages/contexts/index.ts';
 
 import type { InputBarFormHandle } from '../components/InputBar';
 import { InputBar } from '../components/InputBar';
@@ -25,8 +26,9 @@ export const ChatInput = memo(function ChatInput({ onMessageSubmit }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const formRef = useRef<InputBarFormHandle>(null);
 
-  const { isPending, run, cancel } = useAgentRun();
+  const { agent, isPending, run, cancel } = useAgentRun();
   const { isPending: isFileUploadPending } = useFileUpload();
+  const { messages } = useMessages();
 
   const form = useForm<ChatFormValues>({
     mode: 'onChange',
@@ -43,12 +45,16 @@ export const ChatInput = memo(function ChatInput({ onMessageSubmit }: Props) {
 
   const inputValue = watch('input');
 
+  const {
+    ui: { prompt_suggestions },
+  } = agent;
   const isSubmitDisabled = isPending || isFileUploadPending || !inputValue;
 
   return (
     <FormProvider {...form}>
       <div ref={containerRef}>
         <InputBar
+          promptSuggestions={!messages.length ? prompt_suggestions : undefined}
           onSubmit={() => {
             handleSubmit(async ({ input }) => {
               onMessageSubmit?.();
@@ -65,6 +71,9 @@ export const ChatInput = memo(function ChatInput({ onMessageSubmit }: Props) {
             placeholder: 'Ask a question…',
             ...register('input', { required: true }),
           }}
+          onInputChange={(value) => {
+            form.setValue('input', value, { shouldValidate: true });
+          }}
         >
           {!isPending ? (
             <Button

apps/beeai-ui/src/modules/runs/components/InputBar.tsx

@@ -4,24 +4,29 @@
  */
 
 import type { FormEventHandler, PropsWithChildren, ReactNode, Ref, TextareaHTMLAttributes } from 'react';
-import { useImperativeHandle, useRef } from 'react';
+import { useImperativeHandle, useRef, useState } from 'react';
+import type { UseFormRegisterReturn } from 'react-hook-form';
+import { mergeRefs } from 'react-merge-refs';
 
 import { TextAreaAutoHeight } from '#components/TextAreaAutoHeight/TextAreaAutoHeight.tsx';
 import { useFileUpload } from '#modules/files/contexts/index.ts';
-import { dispatchInputEventOnFormTextarea, submitFormOnEnter } from '#utils/form-utils.ts';
+import { dispatchInputEventOnTextarea, submitFormOnEnter } from '#utils/form-utils.ts';
 
 import { FileCard } from '../../files/components/FileCard';
 import { FileCardsList } from '../../files/components/FileCardsList';
 import { FileUploadButton } from '../../files/components/FileUploadButton';
 import { AgentModel } from './AgentModel';
 import classes from './InputBar.module.scss';
+import { PromptSuggestions } from './PromptSuggestions';
 
 interface Props {
   isSubmitDisabled?: boolean;
   settings?: ReactNode;
   formRef?: Ref<InputBarFormHandle>;
-  inputProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;
+  inputProps?: TextareaHTMLAttributes<HTMLTextAreaElement> & UseFormRegisterReturn;
+  promptSuggestions?: string[];
   onSubmit?: FormEventHandler;
+  onInputChange?: (value: string) => void;
 }
 
 export type InputBarFormHandle = {
@@ -33,10 +38,16 @@ export function InputBar({
   settings,
   formRef: formRefProp,
   inputProps,
+  promptSuggestions,
   onSubmit,
+  onInputChange,
   children,
 }: PropsWithChildren<Props>) {
   const formRef = useRef<HTMLFormElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const [promptSuggestionsOpen, setPromptSuggestionsOpen] = useState(false);
+
   const { files, removeFile, isDisabled: isFileUploadDisabled } = useFileUpload();
 
   useImperativeHandle(
@@ -48,12 +59,30 @@ export function InputBar({
 
         formElem.reset();
 
-        dispatchInputEventOnFormTextarea(formElem);
+        const inputElem = inputRef.current;
+        if (inputElem) {
+          dispatchInputEventOnTextarea(inputElem);
+        }
       },
     }),
     [],
   );
 
+  const fillWithInput = (value: string) => {
+    const formElem = formRef.current;
+
+    if (!formElem || !onInputChange) return;
+
+    onInputChange(value);
+    setPromptSuggestionsOpen(false);
+
+    const inputElem = inputRef.current;
+    if (inputElem) {
+      dispatchInputEventOnTextarea(inputElem);
+      inputElem.focus();
+    }
+  };
+
   return (
     <form
       className={classes.root}
@@ -82,6 +111,7 @@ export function InputBar({
         rows={1}
         autoFocus
         {...inputProps}
+        ref={mergeRefs([inputRef, inputProps?.ref])}
         className={classes.textarea}
         onKeyDown={(event) => !isSubmitDisabled && submitFormOnEnter(event)}
       />
@@ -96,6 +126,16 @@ export function InputBar({
 
         <div className={classes.submit}>{children}</div>
       </div>
+
+      {promptSuggestions && (
+        <PromptSuggestions
+          inputRef={inputRef}
+          suggestions={promptSuggestions}
+          isOpen={promptSuggestionsOpen}
+          setIsOpen={setPromptSuggestionsOpen}
+          onSubmit={fillWithInput}
+        />
+      )}
     </form>
   );
 }

apps/beeai-ui/src/modules/runs/components/PromptSuggestions.module.scss

@@ -0,0 +1,57 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.ref {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.root {
+  z-index: z('modal') - 1;
+  padding: 0 !important;
+}
+
+.content {
+  background-color: $layer;
+  display: flex;
+  flex-direction: column;
+  row-gap: $spacing-03;
+}
+
+.heading {
+  @include type-style(label-02);
+  line-height: math.div(22, 14);
+  color: $cool-gray-50;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  row-gap: $spacing-02;
+}
+
+.button {
+  @include type-style(label-02);
+  background-color: transparent;
+  border: 0;
+  padding-inline: 0;
+  padding-block: $spacing-03;
+  text-align: start;
+  color: $text-primary;
+  transition: color $duration-fast-02;
+  inline-size: 100%;
+  cursor: pointer;
+  display: flex;
+  &:hover {
+    color: $text-helper;
+  }
+  &:focus-visible {
+    @include focus-outline('outline');
+  }
+  > span {
+    @include line-clamp(2);
+  }
+}