add My Prompts settings tab and create prompt button in picker

surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx

@@ -0,0 +1,225 @@
+"use client";
+
+import { PenLine, Plus, Sparkles, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import type { PromptRead } from "@/contracts/types/prompts.types";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/ui/spinner";
+import { promptsApiService } from "@/lib/apis/prompts-api.service";
+
+interface PromptFormData {
+	name: string;
+	prompt: string;
+	mode: "transform" | "explore";
+}
+
+const EMPTY_FORM: PromptFormData = { name: "", prompt: "", mode: "transform" };
+
+export function PromptsContent() {
+	const [prompts, setPrompts] = useState<PromptRead[]>([]);
+	const [isLoading, setIsLoading] = useState(true);
+	const [showForm, setShowForm] = useState(false);
+	const [editingId, setEditingId] = useState<number | null>(null);
+	const [formData, setFormData] = useState<PromptFormData>(EMPTY_FORM);
+	const [isSaving, setIsSaving] = useState(false);
+
+	useEffect(() => {
+		promptsApiService
+			.list()
+			.then(setPrompts)
+			.catch(() => toast.error("Failed to load prompts"))
+			.finally(() => setIsLoading(false));
+	}, []);
+
+	const handleSave = useCallback(async () => {
+		if (!formData.name.trim() || !formData.prompt.trim()) {
+			toast.error("Name and prompt are required");
+			return;
+		}
+
+		setIsSaving(true);
+		try {
+			if (editingId) {
+				const updated = await promptsApiService.update(editingId, formData);
+				setPrompts((prev) => prev.map((p) => (p.id === editingId ? updated : p)));
+				toast.success("Prompt updated");
+			} else {
+				const created = await promptsApiService.create(formData);
+				setPrompts((prev) => [created, ...prev]);
+				toast.success("Prompt created");
+			}
+			setShowForm(false);
+			setFormData(EMPTY_FORM);
+			setEditingId(null);
+		} catch {
+			toast.error("Failed to save prompt");
+		} finally {
+			setIsSaving(false);
+		}
+	}, [formData, editingId]);
+
+	const handleEdit = useCallback((prompt: PromptRead) => {
+		setFormData({
+			name: prompt.name,
+			prompt: prompt.prompt,
+			mode: prompt.mode as "transform" | "explore",
+		});
+		setEditingId(prompt.id);
+		setShowForm(true);
+	}, []);
+
+	const handleDelete = useCallback(async (id: number) => {
+		try {
+			await promptsApiService.delete(id);
+			setPrompts((prev) => prev.filter((p) => p.id !== id));
+			toast.success("Prompt deleted");
+		} catch {
+			toast.error("Failed to delete prompt");
+		}
+	}, []);
+
+	const handleCancel = useCallback(() => {
+		setShowForm(false);
+		setFormData(EMPTY_FORM);
+		setEditingId(null);
+	}, []);
+
+	if (isLoading) {
+		return (
+			<div className="flex items-center justify-center py-12">
+				<Spinner className="size-6" />
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-6 min-w-0 overflow-hidden">
+			<div className="flex items-center justify-between">
+				<p className="text-sm text-muted-foreground">
+					Create prompt templates triggered with <kbd className="rounded border bg-muted px-1.5 py-0.5 text-xs font-mono">/</kbd> in the chat composer.
+				</p>
+				{!showForm && (
+					<Button
+						size="sm"
+						onClick={() => {
+							setShowForm(true);
+							setEditingId(null);
+							setFormData(EMPTY_FORM);
+						}}
+						className="shrink-0 gap-1.5"
+					>
+						<Plus className="size-3.5" />
+						New
+					</Button>
+				)}
+			</div>
+
+			{showForm && (
+				<div className="rounded-lg border border-border/60 bg-card p-6 space-y-4">
+					<h3 className="text-sm font-semibold tracking-tight">
+						{editingId ? "Edit prompt" : "New prompt"}
+					</h3>
+
+					<div className="space-y-2">
+						<Label htmlFor="prompt-name">Name</Label>
+						<Input
+							id="prompt-name"
+							value={formData.name}
+							onChange={(e) => setFormData((p) => ({ ...p, name: e.target.value }))}
+							placeholder="e.g. Fix grammar"
+						/>
+					</div>
+
+					<div className="space-y-2">
+						<Label htmlFor="prompt-template">Prompt template</Label>
+						<textarea
+							id="prompt-template"
+							value={formData.prompt}
+							onChange={(e) => setFormData((p) => ({ ...p, prompt: e.target.value }))}
+							placeholder="e.g. Fix the grammar in the following text. Return only the corrected text."
+							rows={4}
+							className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm outline-none resize-none focus:ring-1 focus:ring-ring"
+						/>
+					</div>
+
+					<div className="space-y-2">
+						<Label htmlFor="prompt-mode">Mode</Label>
+						<select
+							id="prompt-mode"
+							value={formData.mode}
+							onChange={(e) => setFormData((p) => ({ ...p, mode: e.target.value as "transform" | "explore" }))}
+							className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring"
+						>
+							<option value="transform">Transform — rewrites or modifies your text</option>
+							<option value="explore">Explore — answers a question about your text</option>
+						</select>
+					</div>
+
+					<div className="flex items-center justify-end gap-2 pt-2">
+						<Button variant="ghost" size="sm" onClick={handleCancel}>
+							Cancel
+						</Button>
+						<Button size="sm" onClick={handleSave} disabled={isSaving}>
+							{isSaving ? <Spinner className="size-3.5" /> : editingId ? "Update" : "Create"}
+						</Button>
+					</div>
+				</div>
+			)}
+
+			{prompts.length === 0 && !showForm && (
+				<div className="rounded-lg border border-dashed border-border/60 p-8 text-center">
+					<Sparkles className="mx-auto size-8 text-muted-foreground/40" />
+					<p className="mt-2 text-sm text-muted-foreground">No custom prompts yet</p>
+					<p className="text-xs text-muted-foreground/60">
+						Create prompts to quickly transform or explore text with /
+					</p>
+				</div>
+			)}
+
+			{prompts.length > 0 && (
+				<div className="space-y-2">
+					{prompts.map((prompt) => (
+						<div
+							key={prompt.id}
+							className="group flex items-start gap-3 rounded-lg border border-border/60 bg-card p-4"
+						>
+							<div className="mt-0.5 shrink-0 text-muted-foreground">
+								<Sparkles className="size-4" />
+							</div>
+							<div className="flex-1 min-w-0">
+								<div className="flex items-center gap-2">
+									<span className="text-sm font-medium">{prompt.name}</span>
+									<span className="rounded-full border px-2 py-0.5 text-[10px] text-muted-foreground">
+										{prompt.mode}
+									</span>
+								</div>
+								<p className="mt-1 text-xs text-muted-foreground line-clamp-2">{prompt.prompt}</p>
+							</div>
+							<div className="hidden group-hover:flex items-center gap-1 shrink-0">
+								<Button
+									variant="ghost"
+									size="icon"
+									className="size-7"
+									onClick={() => handleEdit(prompt)}
+								>
+									<PenLine className="size-3.5" />
+								</Button>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="size-7 text-destructive hover:text-destructive"
+									onClick={() => handleDelete(prompt.id)}
+								>
+									<Trash2 className="size-3.5" />
+								</Button>
+							</div>
+						</div>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}

surfsense_web/components/new-chat/prompt-picker.tsx

@@ -10,7 +10,9 @@ import {
 	PenLine,
 	Search,
 	Zap,
+	Plus,
 } from "lucide-react";
+import { useSetAtom } from "jotai";
 import {
 	forwardRef,
 	useCallback,
@@ -21,6 +23,7 @@ import {
 	useState,
 } from "react";
 
+import { userSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import type { PromptRead } from "@/contracts/types/prompts.types";
 import { promptsApiService } from "@/lib/apis/prompts-api.service";
 import { cn } from "@/lib/utils";
@@ -63,6 +66,7 @@ const DEFAULT_ACTIONS: { name: string; prompt: string; mode: "transform" | "expl
 
 export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(
 	function PromptPicker({ onSelect, onDone, externalSearch = "", containerStyle }, ref) {
+		const setUserSettingsDialog = useSetAtom(userSettingsDialogAtom);
 		const [highlightedIndex, setHighlightedIndex] = useState(0);
 		const [customPrompts, setCustomPrompts] = useState<PromptRead[]>([]);
 		const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -147,13 +151,16 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(
 
 		if (filtered.length === 0) return null;
 
+		const defaultFiltered = filtered.filter((_, i) => i < DEFAULT_ACTIONS.length);
+		const customFiltered = filtered.filter((_, i) => i >= DEFAULT_ACTIONS.length);
+
 		return (
 			<div
 				className="w-64 rounded-lg border bg-popover shadow-lg overflow-hidden"
 				style={containerStyle}
 			>
 				<div ref={scrollContainerRef} className="max-h-48 overflow-y-auto py-1">
-					{filtered.map((action, index) => (
+					{defaultFiltered.map((action, index) => (
 						<button
 							key={action.name}
 							ref={(el) => {
@@ -172,6 +179,46 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(
 							<span className="truncate">{action.name}</span>
 						</button>
 					))}
+
+					{customFiltered.length > 0 && (
+						<div className="my-1 h-px bg-border mx-2" />
+					)}
+
+					{customFiltered.map((action, i) => {
+						const index = defaultFiltered.length + i;
+						return (
+							<button
+								key={action.name}
+								ref={(el) => {
+									if (el) itemRefs.current.set(index, el);
+									else itemRefs.current.delete(index);
+								}}
+								type="button"
+								onClick={() => handleSelect(index)}
+								onMouseEnter={() => setHighlightedIndex(index)}
+								className={cn(
+									"flex w-full items-center gap-2 px-3 py-1.5 text-sm cursor-pointer",
+									index === highlightedIndex ? "bg-accent" : "hover:bg-accent/50"
+								)}
+							>
+								<span className="text-muted-foreground"><Zap className="size-3.5" /></span>
+								<span className="truncate">{action.name}</span>
+							</button>
+						);
+					})}
+
+					<div className="my-1 h-px bg-border mx-2" />
+					<button
+						type="button"
+						onClick={() => {
+							onDone();
+							setUserSettingsDialog({ open: true, initialTab: "prompts" });
+						}}
+						className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-accent/50 cursor-pointer"
+					>
+						<Plus className="size-3.5" />
+						<span>Create prompt</span>
+					</button>
 				</div>
 			</div>
 		);

surfsense_web/components/settings/user-settings-dialog.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { useAtom } from "jotai";
-import { KeyRound, User } from "lucide-react";
+import { KeyRound, Sparkles, User } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { ApiKeyContent } from "@/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent";
 import { ProfileContent } from "@/app/dashboard/[search_space_id]/user-settings/components/ProfileContent";
+import { PromptsContent } from "@/app/dashboard/[search_space_id]/user-settings/components/PromptsContent";
 import { userSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import { SettingsDialog } from "@/components/settings/settings-dialog";
 
@@ -19,6 +20,11 @@ export function UserSettingsDialog() {
 			label: t("api_key_nav_label"),
 			icon: <KeyRound className="h-4 w-4" />,
 		},
+		{
+			value: "prompts",
+			label: "My Prompts",
+			icon: <Sparkles className="h-4 w-4" />,
+		},
 	];
 
 	return (
@@ -33,6 +39,7 @@ export function UserSettingsDialog() {
 			<div className="pt-4">
 				{state.initialTab === "profile" && <ProfileContent />}
 				{state.initialTab === "api-key" && <ApiKeyContent />}
+				{state.initialTab === "prompts" && <PromptsContent />}
 			</div>
 		</SettingsDialog>
 	);