iris-chatbot 0.2.4

package/template/src/components/SearchModal.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Search, X } from "lucide-react";
+import type { Thread } from "../lib/types";
+
+export default function SearchModal({
+  threads,
+  onClose,
+  onSelect,
+}: {
+  threads: Thread[];
+  onClose: () => void;
+  onSelect: (id: string) => void;
+}) {
+  const [query, setQuery] = useState("");
+
+  const results = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return threads;
+    return threads.filter((thread) => thread.title.toLowerCase().includes(q));
+  }, [query, threads]);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center bg-black/60 px-4 pt-24"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-2xl rounded-2xl border border-[var(--border)] bg-[var(--panel)] shadow-[var(--shadow)]"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="flex items-center gap-3 border-b border-[var(--border)] px-4 py-3">
+          <Search className="h-4 w-4 text-[var(--text-muted)]" />
+          <input
+            className="flex-1 bg-transparent text-sm text-[var(--text-primary)] outline-none"
+            placeholder="Search chats..."
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            autoFocus
+          />
+          <button
+            className="rounded-full border border-[var(--border)] bg-[var(--panel-2)] p-1 text-[var(--text-muted)]"
+            onClick={onClose}
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="max-h-[420px] overflow-y-auto px-2 py-2">
+          {results.length === 0 ? (
+            <div className="px-4 py-6 text-sm text-[var(--text-muted)]">
+              No chats found.
+            </div>
+          ) : (
+            results.map((thread) => (
+              <button
+                key={thread.id}
+                onClick={() => onSelect(thread.id)}
+                className="flex w-full items-center justify-between rounded-lg px-4 py-3 text-left text-sm text-[var(--text-secondary)] hover:bg-[var(--panel-2)]"
+              >
+                <span className="line-clamp-1">{thread.title}</span>
+                <span className="text-xs text-[var(--text-muted)]">
+                  {new Date(thread.updatedAt).toLocaleDateString()}
+                </span>
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}