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

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

@@ -0,0 +1,112 @@
+"use client";
+
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import type React from "react";
+import { useCallback, useMemo, useState } from "react";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+
+function parseDateTimeValue(value: string): { date: Date | undefined; time: string } {
+	if (!value) return { date: undefined, time: "09:00" };
+	try {
+		const d = new Date(value);
+		if (Number.isNaN(d.getTime())) return { date: undefined, time: "09:00" };
+		return {
+			date: d,
+			time: format(d, "HH:mm"),
+		};
+	} catch {
+		return { date: undefined, time: "09:00" };
+	}
+}
+
+function buildLocalDateTimeString(date: Date | undefined, time: string): string {
+	if (!date) return "";
+	const [hours, minutes] = time.split(":").map(Number);
+	const combined = new Date(date);
+	combined.setHours(hours ?? 9, minutes ?? 0, 0, 0);
+	const y = combined.getFullYear();
+	const m = String(combined.getMonth() + 1).padStart(2, "0");
+	const d = String(combined.getDate()).padStart(2, "0");
+	const h = String(combined.getHours()).padStart(2, "0");
+	const min = String(combined.getMinutes()).padStart(2, "0");
+	return `${y}-${m}-${d}T${h}:${min}:00`;
+}
+
+/**
+ * Calendar popover + 24h time input. Emits a local ISO-like string
+ * (``YYYY-MM-DDThh:mm:00``) on every change. Value is parsed back into
+ * date + time on every render so the picker stays in sync with
+ * controlled props.
+ */
+export function DateTimePickerField({
+	id,
+	value,
+	onChange,
+}: {
+	id: string;
+	value: string;
+	onChange: (value: string) => void;
+}) {
+	const parsed = useMemo(() => parseDateTimeValue(value), [value]);
+	const [selectedDate, setSelectedDate] = useState<Date | undefined>(parsed.date);
+	const [time, setTime] = useState(parsed.time);
+	const [open, setOpen] = useState(false);
+
+	const handleDateSelect = useCallback(
+		(day: Date | undefined) => {
+			setSelectedDate(day);
+			onChange(buildLocalDateTimeString(day, time));
+			setOpen(false);
+		},
+		[time, onChange]
+	);
+
+	const handleTimeChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			const newTime = e.target.value;
+			setTime(newTime);
+			onChange(buildLocalDateTimeString(selectedDate, newTime));
+		},
+		[selectedDate, onChange]
+	);
+
+	const displayLabel = selectedDate
+		? `${format(selectedDate, "MMM d, yyyy")} at ${time}`
+		: "Pick date & time";
+
+	return (
+		<div className="flex gap-2">
+			<Popover open={open} onOpenChange={setOpen}>
+				<PopoverTrigger asChild>
+					<button
+						id={id}
+						type="button"
+						className="flex-1 flex items-center gap-2 h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring"
+					>
+						<CalendarIcon className="size-3.5 text-muted-foreground shrink-0" />
+						<span className={selectedDate ? "text-foreground" : "text-muted-foreground"}>
+							{displayLabel}
+						</span>
+					</button>
+				</PopoverTrigger>
+				<PopoverContent className="w-auto p-0" align="start">
+					<Calendar
+						mode="single"
+						selected={selectedDate}
+						onSelect={handleDateSelect}
+						defaultMonth={selectedDate}
+					/>
+				</PopoverContent>
+			</Popover>
+			<Input
+				type="time"
+				value={time}
+				onChange={handleTimeChange}
+				className="w-[120px] text-sm shrink-0 appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+			/>
+		</div>
+	);
+}

surfsense_web/features/chat-messages/hitl/edit-panel/fields/email-tags-field.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { TagInput, type Tag as TagType } from "emblor";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+function parseEmailsToTags(value: string): TagType[] {
+	if (!value.trim()) return [];
+	return value
+		.split(",")
+		.map((s) => s.trim())
+		.filter(Boolean)
+		.map((email, i) => ({ id: `${Date.now()}-${i}`, text: email }));
+}
+
+function tagsToEmailString(tags: TagType[]): string {
+	return tags.map((t) => t.text).join(", ");
+}
+
+/**
+ * Comma-separated email field rendered as a tag input. Internal tag
+ * state is the source of truth; comma-string is propagated to the
+ * caller via ``onChange`` whenever tags change (skipping the initial
+ * mount to avoid spurious updates).
+ */
+export function EmailsTagField({
+	id,
+	value,
+	onChange,
+	placeholder,
+}: {
+	id: string;
+	value: string;
+	onChange: (value: string) => void;
+	placeholder?: string;
+}) {
+	const [tags, setTags] = useState<TagType[]>(() => parseEmailsToTags(value));
+	const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
+	const isInitialMount = useRef(true);
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+
+	useEffect(() => {
+		if (isInitialMount.current) {
+			isInitialMount.current = false;
+			return;
+		}
+		onChangeRef.current(tagsToEmailString(tags));
+	}, [tags]);
+
+	const handleSetTags = useCallback((newTags: TagType[] | ((prev: TagType[]) => TagType[])) => {
+		setTags((prev) => (typeof newTags === "function" ? newTags(prev) : newTags));
+	}, []);
+
+	const handleAddTag = useCallback((text: string) => {
+		const trimmed = text.trim();
+		if (!trimmed) return;
+		setTags((prev) => {
+			if (prev.some((tag) => tag.text === trimmed)) return prev;
+			const newTag: TagType = { id: Date.now().toString(), text: trimmed };
+			return [...prev, newTag];
+		});
+	}, []);
+
+	return (
+		<TagInput
+			id={id}
+			tags={tags}
+			setTags={handleSetTags}
+			placeholder={placeholder ?? "Add email"}
+			onAddTag={handleAddTag}
+			styleClasses={{
+				inlineTagsContainer:
+					"border border-input rounded-md bg-transparent shadow-xs transition-[color,box-shadow] outline-none focus-within:border-ring p-1 gap-1",
+				input:
+					"w-full min-w-[80px] focus-visible:outline-none shadow-none px-2 h-7 text-foreground placeholder:text-muted-foreground bg-transparent text-sm md:text-sm",
+				tag: {
+					body: "h-7 relative bg-accent dark:bg-muted/60 border-0 hover:bg-accent/80 dark:hover:bg-muted rounded-md font-medium text-xs text-foreground/80 ps-2 pe-7 flex",
+					closeButton:
+						"absolute -inset-y-px -end-px p-0 rounded-e-md flex size-7 transition-colors outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 text-foreground hover:text-foreground",
+				},
+			}}
+			activeTagIndex={activeTagIndex}
+			setActiveTagIndex={setActiveTagIndex}
+		/>
+	);
+}

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>
+	);
+}

surfsense_web/features/chat-messages/hitl/edit-panel/fields/index.ts

@@ -0,0 +1,3 @@
+export { DateTimePickerField } from "./calendar-field";
+export { EmailsTagField } from "./email-tags-field";
+export { ExtraFieldsSection } from "./extra-fields";