feat(ui): show message form submission (#1298)

Author: PetrBulanek

apps/beeai-ui/src/api/a2a/utils.ts

@@ -176,4 +176,10 @@ export function getFilePlatformUrl(id: string) {
   return `${PLATFORM_FILE_CONTENT_URL_BASE}${id}`;
 }
 
+export function getFileIdFromFilePlatformUrl(url: string) {
+  const fileId = url.replace(PLATFORM_FILE_CONTENT_URL_BASE, '');
+
+  return fileId;
+}
+
 const MAX_CONTENT_CHARS_LENGTH = 16000;

apps/beeai-ui/src/components/TextAreaAutoHeight/TextAreaAutoHeight.module.scss

@@ -49,6 +49,11 @@ $padding-inline: $spacing-05;
         opacity: 0.5;
       }
     }
+    &:disabled {
+      cursor: not-allowed;
+      color: $text-disabled;
+      background-color: $field;
+    }
   }
 
   &::after,

apps/beeai-ui/src/modules/form/components/FormField.tsx

@@ -4,28 +4,34 @@
  */
 
 import type { CSSProperties } from 'react';
-import { match } from 'ts-pattern';
+import { match, P } from 'ts-pattern';
 
-import type { FormField } from '#api/a2a/extensions/ui/form.ts';
+import type { FormField, FormResponseValue } from '#api/a2a/extensions/ui/form.ts';
 
 import { CheckboxField } from './fields/CheckboxField';
 import { DateField } from './fields/DateField';
 import { FileField } from './fields/FileField';
+import { FileFieldValue } from './fields/FileFieldValue';
 import { MultiSelectField } from './fields/MultiSelectField';
 import { TextField } from './fields/TextField';
 import classes from './FormField.module.scss';
 
 interface Props {
   field: FormField;
+  value?: FormResponseValue;
 }
 
-export function FormField({ field }: Props) {
+export function FormField({ field, value }: Props) {
   const { col_span } = field;
 
   const component = match(field)
     .with({ type: 'text' }, (field) => <TextField field={field} />)
     .with({ type: 'date' }, (field) => <DateField field={field} />)
-    .with({ type: 'file' }, (field) => <FileField field={field} />)
+    .with({ type: 'file' }, (field) =>
+      match(value)
+        .with({ type: 'file', value: P.nonNullable }, ({ value }) => <FileFieldValue field={field} value={value} />)
+        .otherwise(() => <FileField field={field} />),
+    )
     .with({ type: 'multiselect' }, (field) => <MultiSelectField field={field} />)
     .with({ type: 'checkbox' }, (field) => <CheckboxField field={field} />)
     .exhaustive();

apps/beeai-ui/src/modules/form/components/FormFields.module.scss

@@ -0,0 +1,13 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.root {
+  --field-gap: #{$spacing-04};
+  --file-field-max-width: calc(50% - (var(--field-gap) / 2));
+  display: grid;
+  column-gap: var(--field-gap);
+  row-gap: $spacing-06;
+  grid-template-columns: repeat(var(--grid-columns, 1), minmax(0, 1fr));
+}

apps/beeai-ui/src/modules/form/components/FormFields.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { CSSProperties } from 'react';
+
+import type { FormRender, FormResponse } from '#api/a2a/extensions/ui/form.ts';
+
+import { FormField } from './FormField';
+import classes from './FormFields.module.scss';
+
+interface Props {
+  fields: FormRender['fields'];
+  columns: FormRender['columns'];
+  values?: FormResponse['values'];
+}
+
+export function FormFields({ fields, columns, values }: Props) {
+  return (
+    <div className={classes.root} style={{ '--grid-columns': columns } as CSSProperties}>
+      {fields.map((field) => {
+        return <FormField key={field.id} field={field} value={values?.[field.id]} />;
+      })}
+    </div>
+  );
+}

apps/beeai-ui/src/modules/form/components/FormRenderer.tsx

@@ -4,7 +4,6 @@
  */
 
 import { Button } from '@carbon/react';
-import type { CSSProperties } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import type { FormRender } from '#api/a2a/extensions/ui/form.ts';
@@ -14,7 +13,7 @@ import { AgentWelcomeMessage } from '#modules/agents/components/AgentWelcomeMess
 
 import type { RunFormValues } from '../types';
 import { getDefaultValues } from '../utils';
-import { FormField } from './FormField';
+import { FormFields } from './FormFields';
 import classes from './FormRenderer.module.scss';
 
 interface Props {
@@ -48,11 +47,7 @@ export function FormRenderer({ definition, defaultHeading, showHeading = true, i
             </AgentHeader>
           )}
 
-          <div className={classes.fields} style={{ '--grid-columns': columns } as CSSProperties}>
-            {fields.map((field) => (
-              <FormField key={field.id} field={field} />
-            ))}
-          </div>
+          <FormFields fields={fields} columns={columns} />
 
           {!isDisabled && (
             <>

apps/beeai-ui/src/modules/form/components/fields/FielFieldValue.module.scss

@@ -0,0 +1,15 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.files {
+  column-gap: var(--field-gap);
+  > li {
+    max-inline-size: var(--file-field-max-width);
+  }
+}
+
+.empty {
+  color: $text-secondary;
+}

apps/beeai-ui/src/modules/form/components/fields/FileField.module.scss

@@ -4,13 +4,24 @@
  */
 
 .button {
-  &:global(.cds--btn:hover) {
-    background-color: $layer-hover-02;
+  &:global(.cds--btn) {
+    &:hover {
+      background-color: $layer-hover-02;
+    }
+    &:disabled {
+      &,
+      &:hover {
+        color: $text-disabled;
+        background-color: $field;
+        border-color: $border-subtle-00;
+      }
+    }
   }
 }
 
 .files {
+  column-gap: var(--field-gap);
   > li {
-    max-inline-size: calc(50% - #{math.div($spacing-04, 2)});
+    max-inline-size: var(--file-field-max-width);
   }
 }

apps/beeai-ui/src/modules/form/components/fields/FileFieldValue.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { FormGroup } from '@carbon/react';
+
+import type { FileField, FormResponseValue } from '#api/a2a/extensions/ui/form.ts';
+import { getFileIdFromFilePlatformUrl } from '#api/a2a/utils.ts';
+import { FileCard } from '#modules/files/components/FileCard.tsx';
+import { FileCardsList } from '#modules/files/components/FileCardsList.tsx';
+import { getFileContentUrl } from '#modules/files/utils.ts';
+
+import classes from './FielFieldValue.module.scss';
+
+interface Props {
+  field: FileField;
+  value: NonNullable<Extract<FormResponseValue, { type: 'file' }>['value']>;
+}
+
+export function FileFieldValue({ field, value }: Props) {
+  const { label } = field;
+  const hasFiles = value.length > 0;
+
+  return (
+    <FormGroup legendText={label}>
+      {hasFiles ? (
+        <FileCardsList className={classes.files}>
+          {value.map(({ uri, name }) => {
+            const href = getFileContentUrl(getFileIdFromFilePlatformUrl(uri));
+            const filename = name ?? uri;
+
+            return (
+              <li key={uri}>
+                <FileCard href={href} size="sm" filename={filename} />
+              </li>
+            );
+          })}
+        </FileCardsList>
+      ) : (
+        <p className={classes.empty}>No files selected</p>
+      )}
+    </FormGroup>
+  );
+}

apps/beeai-ui/src/modules/form/components/fields/MultiSelect.module.scss

@@ -11,17 +11,27 @@
 
 .option {
   &:global(.cds--tag) {
+    color: $text-primary;
     border-color: $layer-02;
     background-color: $layer-02;
-    color: $text-primary;
     &:hover {
       border-color: $layer-hover-02;
       background-color: $layer-hover-02;
     }
-    &.isSelected {
+    &:disabled {
+      cursor: not-allowed;
+      color: $text-disabled;
+      border-color: $field;
+      background-color: $field;
+    }
+    &:global(.cds--tag--selected) {
+      color: $text-inverse;
       border-color: $text-primary;
       background-color: $text-primary;
-      color: $text-inverse;
+      &:disabled {
+        border-color: $layer-selected-disabled;
+        background-color: $layer-selected-disabled;
+      }
     }
   }
 }