feat: Add MultiSelect, RadioGroup and Checkbox input widget types (#2472)

### Summary

This PR addresses issue #1858 by introducing several new UI input
widgets to Chainlit, including `MultiSelect`, `Checkbox`, and
`RadioGroup`. These new components provide more flexibility for creating
interactive and user-friendly chat settings.

### Changes

-   **Frontend:**
- Created a new `MultiSelectInput` component with a modern, tag-based
design.
- Added a new `CheckboxInput` component with a simplified UI and
improved tooltip handling.
    -   Added a new `RadioButtonGroup` component.
- Integrated the new components into the main form in `FormInput.tsx`.
- Internationalized the `MultiSelectInput` component with a new
translation key.
    	- Updated every `.json` translation file to include this new key.

-   **Backend:**
- Added `Checkbox`, `RadioGroup`, and `MultiSelect` classes to
`input_widget.py`.
- Updated the `__init__.py` file to expose the new `RadioGroup` class.

### How the New Widgets Work

- **MultiSelect:** The `MultiSelect` component allows users to select
multiple options from a dropdown list. Selected items are displayed as
tags, and can be removed by clicking the "x" button. The dropdown also
includes a search input to quickly filter through a long list of
options.

- **Checkbox:** The `Checkbox` component has been simplified to remove
the redundant title. The `label` is now displayed next to the checkbox,
and the `tooltip` is displayed when the user hovers over the label.

### Testing

Honestly, I tried updating the `chat_setting` test but I wasn't able to
set it properly. I'm a bit of a nooby with Cypress.

### Preview

<img width="523" height="726" alt="image"
src="https://github.com/user-attachments/assets/ffabc0ca-758f-41a7-b71b-e23c70048906"
/>

---

<img width="481" height="133" alt="image"
src="https://github.com/user-attachments/assets/0a11534e-9860-4356-87fc-90262f8c5b3d"
/>

---

<img width="454" height="102" alt="image"
src="https://github.com/user-attachments/assets/24a05854-b338-4ae0-8264-47f70402e3c7"
/>

Author: agutierrezmorag

backend/chainlit/input_widget.py

@@ -180,3 +180,113 @@ def to_dict(self) -> Dict[str, Any]:
             "tooltip": self.tooltip,
             "description": self.description,
         }
+
+
+@dataclass
+class MultiSelect(InputWidget):
+    """Useful to create a multi-select input."""
+
+    type: InputWidgetType = "multiselect"
+    initial: List[str] = Field(default_factory=list)
+    values: List[str] = Field(default_factory=list)
+    items: Dict[str, str] = Field(default_factory=dict)
+
+    def __post_init__(
+        self,
+    ) -> None:
+        super().__post_init__()
+
+        if not self.values and not self.items:
+            raise ValueError("Must provide values or items to create a MultiSelect")
+
+        if self.values and self.items:
+            raise ValueError(
+                "You can only provide either values or items to create a MultiSelect"
+            )
+
+        if self.values:
+            self.items = {value: value for value in self.values}
+
+    def to_dict(self) -> Dict[str, Any]:
+        return {
+            "type": self.type,
+            "id": self.id,
+            "label": self.label,
+            "initial": self.initial,
+            "items": [
+                {"label": id, "value": value} for id, value in self.items.items()
+            ],
+            "tooltip": self.tooltip,
+            "description": self.description,
+        }
+
+
+@dataclass
+class Checkbox(InputWidget):
+    """Useful to create a checkbox input."""
+
+    type: InputWidgetType = "checkbox"
+    initial: bool = False
+
+    def to_dict(self) -> Dict[str, Any]:
+        return {
+            "type": self.type,
+            "id": self.id,
+            "label": self.label,
+            "initial": self.initial,
+            "tooltip": self.tooltip,
+            "description": self.description,
+        }
+
+
+@dataclass
+class RadioGroup(InputWidget):
+    """Useful to create a radio button input."""
+
+    type: InputWidgetType = "radio"
+    initial: Optional[str] = None
+    initial_index: Optional[int] = None
+    initial_value: Optional[str] = None
+    values: List[str] = Field(default_factory=list)
+    items: Dict[str, str] = Field(default_factory=dict)
+
+    def __post_init__(
+        self,
+    ) -> None:
+        super().__post_init__()
+
+        if not self.values and not self.items:
+            raise ValueError("Must provide values or items to create a RadioButton")
+
+        if self.values and self.items:
+            raise ValueError(
+                "You can only provide either values or items to create a RadioButton"
+            )
+
+        if not self.values and self.initial_index is not None:
+            raise ValueError(
+                "Initial_index can only be used in combination with values to create a RadioButton"
+            )
+
+        if self.items:
+            self.initial = self.initial_value
+        elif self.values:
+            self.items = {value: value for value in self.values}
+            self.initial = (
+                self.values[self.initial_index]
+                if self.initial_index is not None
+                else self.initial_value
+            )
+
+    def to_dict(self) -> Dict[str, Any]:
+        return {
+            "type": self.type,
+            "id": self.id,
+            "label": self.label,
+            "initial": self.initial,
+            "items": [
+                {"label": id, "value": value} for id, value in self.items.items()
+            ],
+            "tooltip": self.tooltip,
+            "description": self.description,
+        }

backend/chainlit/translations/bn.json

@@ -222,5 +222,10 @@
     "security": "Security",
     "beta": "Beta",
     "best-practice": "Best Practice"
+  },
+  "components": {
+    "MultiSelectInput": {
+      "placeholder": "বেছে নিন..."
+    }
   }
 }

backend/chainlit/translations/el-GR.json

@@ -222,5 +222,10 @@
     "security": "Ασφάλεια",
     "beta": "Beta",
     "best-practice": "Βέλτιστη Πρακτική"
+  },
+  "components": {
+    "MultiSelectInput": {
+      "placeholder": "Επιλέξτε..."
+    }
   }
 }

backend/chainlit/translations/en-US.json

@@ -222,5 +222,10 @@
     "security": "Security",
     "beta": "Beta",
     "best-practice": "Best Practice"
+  },
+  "components": {
+    "MultiSelectInput": {
+      "placeholder": "Select..."
+    }
   }
 }

backend/chainlit/translations/es.json

@@ -222,5 +222,10 @@
     "security": "Seguridad",
     "beta": "Beta",
     "best-practice": "Mejor práctica"
+  },
+  "components": {
+    "MultiSelectInput": {
+      "placeholder": "Seleccionar..."
+    }
   }
 }

backend/chainlit/translations/fr-FR.json

@@ -222,5 +222,10 @@
         "security": "Sécurité",
         "beta": "Bêta",
         "best-practice": "Meilleure pratique"
+    },
+    "components": {
+        "MultiSelectInput": {
+        "placeholder": "Sélectionner..."
+        }
     }
 }

backend/chainlit/translations/gu.json

@@ -222,5 +222,10 @@
     "security": "Security",
     "beta": "Beta",
     "best-practice": "Best Practice"
+  },
+  "components": {
+    "MultiSelectInput": {
+      "placeholder": "બેંચી લો..."
+    }
   }
 }

backend/chainlit/translations/he-IL.json

@@ -222,5 +222,10 @@
     "security": "Security",
     "beta": "Beta",
     "best-practice": "Best Practice"
+  },
+  "components": {
+    "MultiSelectInput": {
+      "placeholder": "בחר..."
+    }
   }
 }

backend/chainlit/translations/hi.json

@@ -222,5 +222,10 @@
     "security": "Security",
     "beta": "Beta",
     "best-practice": "Best Practice"
+  },
+  "components": {
+    "MultiSelectInput": {
+      "placeholder": "चुनें..."
+    }
   }
 }

backend/chainlit/translations/ja.json

@@ -221,5 +221,10 @@
     "security": "Security",
     "beta": "Beta",
     "best-practice": "Best Practice"
+  },
+  "components": {
+    "MultiSelectInput": {
+      "placeholder": "選択..."
+    }
   }
-  }
+}