Fix: Replace react-tagsinput with lightweight alternative to avoid type problems at compilation

frontend/package.json

@@ -21,7 +21,7 @@
     "notistack": "3.0.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-tagsinput": "3.20.3",
+    "react-tag-input-component": "latest",
     "rxjs": "7.8.1"
   },
   "devDependencies": {
@@ -30,7 +30,6 @@
     "@types/file-saver": "2.0.7",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "@types/react-tagsinput": "3.20.6",
     "@types/video.js": "7.3.58",
     "@typescript-eslint/eslint-plugin": "8.15.0",
     "@typescript-eslint/parser": "8.15.0",

frontend/src/component/form-view/from-view.tsx

@@ -70,7 +70,7 @@ export default function FormView(props: FormViewProps) {
             case FormFieldType.MAP:
                 return <div className="form-view__map-editor"><MapEditor onChange={handleChange} name={field.name} values={data?.[field.name]}></MapEditor></div>
             case FormFieldType.TAGS:
-                return <TagInput onChange={handleChange} name={field.name} values={data?.[field.name]}></TagInput>
+                return <TagInput onChange={handleChange} name={field.name} values={data?.[field.name] || []}></TagInput>
             case FormFieldType.NUMBER:
             case FormFieldType.TEXT:
             default:
@@ -95,4 +95,4 @@ export default function FormView(props: FormViewProps) {
             }
         </div>
     </div>
-}
+}

frontend/src/component/tag-input/tag-input.scss

@@ -1,19 +1,10 @@
-@import "~react-tagsinput/react-tagsinput.css";
-
-.react-tagsinput {
-  background-color: inherit !important;
-  border: none !important;
-
-  &-tag {
-    background-color: var(--checkbox-checked-background-color) !important;
-    color: var(--text-color) !important;
-    border: 1px solid var(--border-light-color) !important;
-
-  }
-  &-remove {
-    color: var(--text-color) !important;
-    &:hover {
-      color: var(--tab-active-color) !important;
-    }
-  }
+.rti--container {
+  --rti-bg: inherit !important;
+  --rti-border: none !important;
+  --rti-tag: var(--checkbox-checked-background-color) !important;
+  --rti-tag-color: var(--text-color) !important;
+  --rti-tag-border: var(--border-light-color) !important;
+  --rti-tag-remove: var(--text-color) !important;
+  --rti-tag-remove-hover: var(--tab-active-color) !important;
+  max-width: 660px;
 }

frontend/src/component/tag-input/tag-input.tsx

@@ -1,29 +1,28 @@
-import React, {useCallback, useEffect, useState} from "react";
-import './tag-input.scss';
-import TagsInput from "react-tagsinput";
+import React from "react";
+import { TagsInput } from "react-tag-input-component";
+import "./tag-input.scss";
 
 interface TagInputProps {
-    name: string;
-    values: string[];
-    onChange: (name: string, values: string[]) => void;
+  name: string;
+  values: string[];
+  onChange: (name: string, values: string[]) => void;
 }
 
 export default function TagInput(props: TagInputProps) {
+  const { name, values, onChange } = props;
 
-    const {name, values, onChange} = props;
+  const handleTagsChange = (newTags: string[]) => {
+    onChange(name, newTags);
+  };
 
-    const [tags, setTags] = useState( []);
-
-    useEffect(() =>{
-        if (values) {
-            setTags(values);
-        }
-    }, [values]);
-
-    const handleChange = useCallback((tags: any) => {
-        setTags(tags)
-        onChange(name, tags);
-    }, [name, onChange]);
-
-    return  <TagsInput inputProps={({placeholder: "Add Chat-Id"})} value={tags} onChange={handleChange}></TagsInput>
-}
+  return (
+    <div className="tag-input-container">
+      <TagsInput
+        value={values}
+        onChange={handleTagsChange}
+        name={name}
+        placeHolder="Add tags..."
+      />
+    </div>
+  );
+}