From f125173d93bd32daa625ea800f55cb7af10e74de Mon Sep 17 00:00:00 2001
From: Ethan Zhang <qianze.zhang@hotmail.com>
Date: Thu, 10 Oct 2024 10:31:38 -0500
Subject: [PATCH] fix: fix property table not able to change value when empty
 (#322)

* fix: fix property table not able to change value when empty

* fix: update playground image
---
 docker-compose.yml                            |  2 +-
 .../src/platform/pc/chat/table/index.tsx      | 26 ++++++++++---------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 7b42c1b1..5eddbba1 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -19,7 +19,7 @@ services:
         networks:
             - astra_network
     astra_playground:
-        image: ghcr.io/ten-framework/astra_playground:v0.4.1-9-g09a1df2
+        image: ghcr.io/ten-framework/astra_playground:v0.4.1-103-g391e0d0
         container_name: astra_playground
         restart: always
         ports:
diff --git a/playground/src/platform/pc/chat/table/index.tsx b/playground/src/platform/pc/chat/table/index.tsx
index 944dedd4..78465a40 100644
--- a/playground/src/platform/pc/chat/table/index.tsx
+++ b/playground/src/platform/pc/chat/table/index.tsx
@@ -55,14 +55,16 @@ const EditableTable: React.FC<EditableTableProps> = ({ initialData, onUpdate, me
             const row = await form.validateFields();
             const newData = [...dataSource];
             const index = newData.findIndex((item) => key === item.key);
-
+    
             if (index > -1) {
                 const item = newData[index];
                 const valueType = metadata[key]?.type || 'string';
-                newData.splice(index, 1, { ...item, ...row, value: convertToType(row.value, valueType) });
+                const updatedValue = row.value === '' ? null : convertToType(row.value, valueType); // Set to null if empty
+    
+                newData.splice(index, 1, { ...item, value: updatedValue });
                 setDataSource(newData);
                 setEditingKey('');
-
+    
                 // Notify the parent component of the update
                 const updatedData = Object.fromEntries(newData.map(({ key, value }) => [key, value]));
                 onUpdate(updatedData);
@@ -70,7 +72,8 @@ const EditableTable: React.FC<EditableTableProps> = ({ initialData, onUpdate, me
         } catch (errInfo) {
             console.log('Validation Failed:', errInfo);
         }
-    };
+    };    
+    
 
     // Toggle the checkbox for boolean values directly in the table cell
     const handleCheckboxChange = (key: string, checked: boolean) => {
@@ -108,7 +111,7 @@ const EditableTable: React.FC<EditableTableProps> = ({ initialData, onUpdate, me
             key: 'value',
             render: (_, record: DataType) => {
                 const valueType = metadata[record.key]?.type || 'string';
-
+        
                 // Always display the checkbox for boolean values
                 if (valueType === 'bool') {
                     return (
@@ -118,14 +121,13 @@ const EditableTable: React.FC<EditableTableProps> = ({ initialData, onUpdate, me
                         />
                     );
                 }
-
+        
                 // Inline editing for other types (string, number)
                 const editable = isEditing(record);
                 return editable ? (
                     <Form.Item
                         name="value"
                         style={{ margin: 0 }}
-                        rules={[{ required: true, message: 'Please input the value!' }]}
                     >
                         <Input
                             ref={inputRef} // Attach input ref to control focus
@@ -134,14 +136,14 @@ const EditableTable: React.FC<EditableTableProps> = ({ initialData, onUpdate, me
                         />
                     </Form.Item>
                 ) : (
-                    <div onClick={() => edit(record)}>
-                        {record.value !== null && record.value !== undefined
+                    <div onClick={() => edit(record)} style={{ cursor: 'pointer' }}>
+                        {record.value !== null && record.value !== undefined && record.value !== ''
                             ? record.value
-                            : 'Click to edit'}
-                    </div> // Display placeholder for empty values
+                            : <span style={{ color: 'gray' }}>Click to edit</span>}
+                    </div>
                 );
             },
-        },
+        },        
     ];
 
     return (