Improve tag handling

backend/danswer/db/tag.py

@@ -12,13 +12,30 @@ from danswer.utils.logger import setup_logger
 logger = setup_logger()
 
 
+def check_tag_validity(tag_key: str, tag_value: str) -> bool:
+    """If a tag is too long, it should not be used (it will cause an error in Postgres
+    as the unique constraint can only apply to entries that are less than 2704 bytes).
+
+    Additionally, extremely long tags are not really usable / useful."""
+    if len(tag_key) + len(tag_value) > 255:
+        logger.error(
+            f"Tag with key '{tag_key}' and value '{tag_value}' is too long, cannot be used"
+        )
+        return False
+
+    return True
+
+
 def create_or_add_document_tag(
     tag_key: str,
     tag_value: str,
     source: DocumentSource,
     document_id: str,
     db_session: Session,
-) -> Tag:
+) -> Tag | None:
+    if not check_tag_validity(tag_key, tag_value):
+        return None
+
     document = db_session.get(Document, document_id)
     if not document:
         raise ValueError("Invalid Document, cannot attach Tags")
@@ -48,6 +65,12 @@ def create_or_add_document_tag_list(
     document_id: str,
     db_session: Session,
 ) -> list[Tag]:
+    valid_tag_values = [
+        tag_value for tag_value in tag_values if check_tag_validity(tag_key, tag_value)
+    ]
+    if not valid_tag_values:
+        return []
+
     document = db_session.get(Document, document_id)
     if not document:
         raise ValueError("Invalid Document, cannot attach Tags")

web/src/components/search/DocumentDisplay.tsx

@@ -110,6 +110,9 @@ export function DocumentMetadataBlock({
 }: {
   document: DanswerDocument;
 }) {
+  // don't display super long tags, as they are ugly
+  const MAXIMUM_TAG_LENGTH = 40;
+
   return (
     <div className="flex flex-wrap gap-1">
       {document.updated_at && (
@@ -120,11 +123,19 @@ export function DocumentMetadataBlock({
       {Object.entries(document.metadata).length > 0 && (
         <>
           <div className="pl-1 border-l border-border" />
-          {Object.entries(document.metadata).map(([key, value]) => {
-            return (
-              <MetadataBadge key={key} icon={FiTag} value={`${key}=${value}`} />
-            );
-          })}
+          {Object.entries(document.metadata)
+            .filter(
+              ([key, value]) => (key + value).length <= MAXIMUM_TAG_LENGTH
+            )
+            .map(([key, value]) => {
+              return (
+                <MetadataBadge
+                  key={key}
+                  icon={FiTag}
+                  value={`${key}=${value}`}
+                />
+              );
+            })}
         </>
       )}
     </div>