chat-messages: add hitl module with types, hooks, bundle, approval cards, and edit panel.

surfsense_web/features/chat-messages/hitl/edit-panel/fields/extra-fields.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import type { ExtraField } from "../edit-panel.atom";
+import { DateTimePickerField } from "./calendar-field";
+import { EmailsTagField } from "./email-tags-field";
+
+/**
+ * Renders ``ExtraField[]`` as a labelled vertical stack. Picks the
+ * input control from ``field.type``; unknown types fall back to a
+ * plain ``<Input type={field.type} />`` (covers "text" and "email").
+ *
+ * Pure presentational component — owns no state, just maps values to
+ * controls and propagates changes through ``onFieldChange(key, value)``.
+ */
+export function ExtraFieldsSection({
+	fields,
+	values,
+	onFieldChange,
+}: {
+	fields: ExtraField[];
+	values: Record<string, string>;
+	onFieldChange: (key: string, value: string) => void;
+}) {
+	if (fields.length === 0) return null;
+
+	return (
+		<div className="flex flex-col gap-3 px-4 py-3 border-b">
+			{fields.map((field) => {
+				const fieldId = `extra-field-${field.key}`;
+				const currentValue = values[field.key] ?? "";
+
+				return (
+					<div key={field.key} className="flex flex-col gap-1.5">
+						<Label htmlFor={fieldId} className="text-xs font-medium text-muted-foreground">
+							{field.label}
+						</Label>
+						{field.type === "emails" ? (
+							<EmailsTagField
+								id={fieldId}
+								value={currentValue}
+								onChange={(v) => onFieldChange(field.key, v)}
+								placeholder={`Add ${field.label.toLowerCase()}`}
+							/>
+						) : field.type === "datetime-local" ? (
+							<DateTimePickerField
+								id={fieldId}
+								value={currentValue}
+								onChange={(v) => onFieldChange(field.key, v)}
+							/>
+						) : field.type === "textarea" ? (
+							<Textarea
+								id={fieldId}
+								value={currentValue}
+								onChange={(e) => onFieldChange(field.key, e.target.value)}
+								className="text-sm min-h-[60px]"
+							/>
+						) : (
+							<Input
+								id={fieldId}
+								type={field.type}
+								value={currentValue}
+								onChange={(e) => onFieldChange(field.key, e.target.value)}
+								className="text-sm"
+							/>
+						)}
+					</div>
+				);
+			})}
+		</div>
+	);
+}