From 73dec62a19c0fc0fd9d8630200efadd1cfffe5fc Mon Sep 17 00:00:00 2001
From: breeg554 <dvdk98@gmail.com>
Date: Tue, 5 Nov 2024 10:56:59 +0100
Subject: [PATCH] update messages rendering

---
 apps/api/lib/buildel/blocks/chat.ex           |  6 +-
 .../lib/buildel/blocks/fields/editor_field.ex |  2 +-
 .../components/form/fields/editor.field.tsx   |  4 +-
 .../components/form/schema/SchemaFields.tsx   | 63 +++++++++++--------
 4 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/apps/api/lib/buildel/blocks/chat.ex b/apps/api/lib/buildel/blocks/chat.ex
index 43797d91f..9f2caabd8 100644
--- a/apps/api/lib/buildel/blocks/chat.ex
+++ b/apps/api/lib/buildel/blocks/chat.ex
@@ -213,15 +213,15 @@ defmodule Buildel.Blocks.Chat do
                     "properties" => %{
                       "role" => %{
                         "type" => "string",
-                        "title" => "Role",
+                        "title" => "",
                         "enum" => ["user", "assistant"],
                         "enumPresentAs" => "radio",
                         "default" => "user"
                       },
                       "content" =>
                         EditorField.new(%{
-                          title: "Content",
-                          description: "The content of the message.",
+                          title: "",
+                          description: "",
                           suggestions: [
                             Suggestion.inputs(),
                             Suggestion.metadata(),
diff --git a/apps/api/lib/buildel/blocks/fields/editor_field.ex b/apps/api/lib/buildel/blocks/fields/editor_field.ex
index 953d13386..7c47631e9 100644
--- a/apps/api/lib/buildel/blocks/fields/editor_field.ex
+++ b/apps/api/lib/buildel/blocks/fields/editor_field.ex
@@ -88,7 +88,7 @@ defmodule Buildel.Blocks.Fields.EditorField do
   @type t :: %EditorField{}
 
   @create_fields ~w(title description default min_length editor_language suggestions displayWhen readonly)a
-  @required_fields ~w(title description)a
+  @required_fields ~w()a
 
   @spec new(attrs :: map()) :: t
   def new(%{} = attrs \\ %{}) do
diff --git a/apps/web-remix/app/components/form/fields/editor.field.tsx b/apps/web-remix/app/components/form/fields/editor.field.tsx
index d0c4d0b11..2fb1a6213 100644
--- a/apps/web-remix/app/components/form/fields/editor.field.tsx
+++ b/apps/web-remix/app/components/form/fields/editor.field.tsx
@@ -56,8 +56,8 @@ export const EditorField = ({
   return (
     <>
       <HiddenField value={currentValue} {...getInputProps()} />
-      <div className="flex justify-between items-center">
-        <FieldLabel>{label}</FieldLabel>
+      <div className="flex justify-between items-center mb-1">
+        <FieldLabel className="mb-0">{label}</FieldLabel>
 
         <IconButton
           size="xxs"
diff --git a/apps/web-remix/app/components/form/schema/SchemaFields.tsx b/apps/web-remix/app/components/form/schema/SchemaFields.tsx
index 50f78b236..48308ed30 100644
--- a/apps/web-remix/app/components/form/schema/SchemaFields.tsx
+++ b/apps/web-remix/app/components/form/schema/SchemaFields.tsx
@@ -30,7 +30,7 @@ import type { JSONSchemaField } from '~/components/form/schema/SchemaParser';
 import { IconButton } from '~/components/iconButton';
 import { Button } from '~/components/ui/button';
 import { Collapsible, CollapsibleTrigger } from '~/components/ui/collapsible';
-import { Label } from '~/components/ui/label';
+import { InputMessage, Label } from '~/components/ui/label';
 import { useOrganizationId } from '~/hooks/useOrganizationId';
 import { usePipelineId } from '~/hooks/usePipelineId';
 import { assert } from '~/utils/assert';
@@ -283,36 +283,45 @@ function RealArrayField({
 
   return (
     <div>
-      {rhfFields.map((item, index) => (
-        <div key={item.key} className="mt-2 flex flex-col gap-2">
-          <Field
-            key={item.key}
-            field={field.items}
-            name={`${name}[${index}]`}
-            fields={fields}
-            schema={schema}
-            {...rest}
-          />
-          <IconButton
-            size="xxs"
-            variant="ghost"
-            aria-label="Remove field"
-            icon={<Trash />}
-            disabled={rhfFields.length <= field.minItems || rest.disabled}
-            onClick={(e) => {
-              e.preventDefault();
-              remove(index);
-            }}
-          />
-        </div>
-      ))}
+      <Label>{field.title}</Label>
+      <InputMessage className="mt-0">{field.description}</InputMessage>
+      <div
+        className={cn('flex flex-col gap-4', { 'mt-2': rhfFields.length > 0 })}
+      >
+        {rhfFields.map((item, index) => (
+          <div key={item.key} className="relative flex flex-col gap-1">
+            <IconButton
+              size="xxs"
+              variant="ghost"
+              className="absolute top-0 left-0"
+              aria-label="Remove field"
+              icon={<Trash />}
+              disabled={rhfFields.length <= field.minItems || rest.disabled}
+              onClick={(e) => {
+                e.preventDefault();
+                remove(index);
+              }}
+            />
+
+            <Field
+              key={item.key}
+              field={field.items}
+              name={`${name}[${index}]`}
+              fields={fields}
+              schema={schema}
+              {...rest}
+            />
+          </div>
+        ))}
+      </div>
       <Button
         type="button"
-        size="xxs"
-        variant="secondary"
+        size="xs"
+        variant="outline"
         onClick={() => push({})}
-        className="mt-2"
+        className="mt-4"
         disabled={rest.disabled}
+        isFluid
       >
         Add item
       </Button>