From cc0eed1c8c438baf9769440539551f6370da4323 Mon Sep 17 00:00:00 2001
From: yangdx <gzdaniel@me.com>
Date: Tue, 23 Sep 2025 13:10:06 +0800
Subject: [PATCH] Format <SEP> separators as newlines in properties view for
 non editable value

- Convert <SEP> to semicolon + newline
- Apply formatting to text and tooltip
---
 .../src/components/graph/PropertiesView.tsx      | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/lightrag_webui/src/components/graph/PropertiesView.tsx b/lightrag_webui/src/components/graph/PropertiesView.tsx
index 0eaad42e..f560c8fa 100644
--- a/lightrag_webui/src/components/graph/PropertiesView.tsx
+++ b/lightrag_webui/src/components/graph/PropertiesView.tsx
@@ -206,6 +206,18 @@ const PropertyRow = ({
     return translation === translationKey ? name : translation
   }
 
+  // Utility function to convert <SEP> to newlines
+  const formatValueWithSeparators = (value: any): string => {
+    if (typeof value === 'string') {
+      return value.replace(/<SEP>/g, ';\n')
+    }
+    return typeof value === 'string' ? value : JSON.stringify(value, null, 2)
+  }
+
+  // Format the value to convert <SEP> to newlines
+  const formattedValue = formatValueWithSeparators(value)
+  const formattedTooltip = tooltip || formatValueWithSeparators(value)
+
   // Use EditablePropertyRow for editable fields (description, entity_id and keywords)
   if (isEditable && (name === 'description' || name === 'entity_id' || name === 'keywords')) {
     return (
@@ -233,8 +245,8 @@ const PropertyRow = ({
       <Text
         className="hover:bg-primary/20 rounded p-1 overflow-hidden text-ellipsis"
         tooltipClassName="max-w-80 -translate-x-13"
-        text={value}
-        tooltip={tooltip || (typeof value === 'string' ? value : JSON.stringify(value, null, 2))}
+        text={formattedValue}
+        tooltip={formattedTooltip}
         side="left"
         onClick={onClick}
       />