Goutam/lynkeduppro-crm
2
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(search): global conversation search in the topbar with deep-link nav

Browse Source 
Topbar search box → debounced crm.search → dropdown of hits (chat/mail, highlighted
snippet). Clicking a hit switches to the right tab and focuses the exact thread:
mail → Inbox, chat → Messenger (via the SDK's new focusThreadId, 0.1.6). Snippet HTML
is escaped except the <em> highlight. Demo mode searches an in-memory set.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Maaz Ahamed
2026-07-23 14:07:26 +05:30
parent c874a726ef
commit 904d003d32
13 changed files with 1242 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dashboard/dashboard.tsx
+10 -3
View File
@@ -24,6 +24,13 @@ import "../../app/dashboard/dashboard.css";
export function Dashboard() {
const [theme, setTheme] = useState<"dark" | "light">("dark");
const [active, setActive] = useState("dashboard");
// Deep link from global search: which conversation to focus once we switch tabs.
const [deepLink, setDeepLink] = useState<{ surface: "messenger" | "inbox"; threadId: string } | null>(null);
function navigateToConversation(surface: "messenger" | "inbox", threadId: string) {
setActive(surface);
setDeepLink({ surface, threadId });
}
useEffect(() => {
// Sync the persisted theme from localStorage (an external system) on mount.
@@ -42,15 +49,15 @@ export function Dashboard() {
<div className="dash-root" data-theme={theme}>
<Sidebar active={active} onSelect={setActive} />
<div className="dash-main">
<Topbar theme={theme} onToggle={toggle} title={title} subtitle={subtitle} />
<Topbar theme={theme} onToggle={toggle} title={title} subtitle={subtitle} onNavigate={navigateToConversation} />
<div className="dash-content">
<ToastProvider>
{active === "profile" ? <Profile />
: active === "support" ? <Support />
: active === "rules" ? <Rules />
: active === "ai" ? <AiAssistant />
: active === "messenger" ? <MessengerSdk />
: active === "inbox" ? <InboxSdk />
: active === "messenger" ? <MessengerSdk focusThreadId={deepLink?.surface === "messenger" ? deepLink.threadId : null} />
: active === "inbox" ? <InboxSdk focusThreadId={deepLink?.surface === "inbox" ? deepLink.threadId : null} />
: active === "settings" ? <Settings />
: active === "gallery" ? <SmartGallery theme={theme} />
: active === "team" ? <TeamManagement />
src/components/dashboard/global-search.tsx
+86
View File
@@ -0,0 +1,86 @@
"use client";
// Global conversation search in the topbar: type → debounced crm.search → dropdown of hits; click a
// hit to deep-link to exactly where it lives (mail → Inbox, chat → Messenger, on that thread).
import { useEffect, useRef, useState } from "react";
import { Icon } from "./ui";
import { useGlobalSearch, type SearchResult } from "@/lib/search-api";
/** Escape HTML but keep the engine's <em> highlight tags — so a match snippet can't inject markup. */
function safeSnippet(s: string): string {
const esc = s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
return esc.replace(/&lt;em&gt;/g, "<em>").replace(/&lt;\/em&gt;/g, "</em>");
}
export function GlobalSearch({ onNavigate }: { onNavigate: (surface: "messenger" | "inbox", threadId: string) => void }) {
const search = useGlobalSearch();
const [open, setOpen] = useState(false);
const [q, setQ] = useState("");
const [results, setResults] = useState<SearchResult[]>([]);
const [loading, setLoading] = useState(false);
const wrapRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const term = q.trim();
if (!term) {
setResults([]);
return;
}
let alive = true;
setLoading(true);
const t = setTimeout(() => {
search(term)
.then((r) => { if (alive) setResults(r); })
.catch(() => { if (alive) setResults([]); })
.finally(() => { if (alive) setLoading(false); });
}, 220);
return () => { alive = false; clearTimeout(t); };
}, [q, search]);
useEffect(() => {
function onDown(e: MouseEvent) {
if (!wrapRef.current?.contains(e.target as Node)) setOpen(false);
}
document.addEventListener("mousedown", onDown);
return () => document.removeEventListener("mousedown", onDown);
}, []);
function pick(r: SearchResult) {
onNavigate(r.surface, r.threadId);
setOpen(false);
setQ("");
}
return (
<div className="gs-wrap" ref={wrapRef}>
<div className="gs-field">
<Icon name="search" size={16} />
<input
className="gs-input"
placeholder="Search conversations…"
value={q}
onFocus={() => setOpen(true)}
onChange={(e) => { setQ(e.target.value); setOpen(true); }}
aria-label="Search conversations"
/>
</div>
{open && q.trim() ? (
<div className="gs-pop">
{loading && results.length === 0 ? <div className="gs-empty">Searching…</div> : null}
{!loading && results.length === 0 ? <div className="gs-empty">No matches.</div> : null}
{results.map((r) => (
<button key={r.interactionId} type="button" className="gs-row" onClick={() => pick(r)}>
<span className="gs-ic"><Icon name={r.surface === "inbox" ? "mail" : "send"} size={14} /></span>
<span className="gs-main">
<span className="gs-title">{r.title}</span>
<span className="gs-snippet" dangerouslySetInnerHTML={{ __html: safeSnippet(r.snippet) }} />
</span>
<span className="gs-surface">{r.surface === "inbox" ? "Mail" : "Chat"}</span>
</button>
))}
</div>
) : null}
</div>
);
}
src/components/dashboard/inbox-sdk.tsx
+6 -6
View File
@@ -15,7 +15,7 @@ import type { DataDoor } from "@/lib/crm-messaging-adapter";
const SHELL = isShellConfigured();
export function InboxSdk() {
export function InboxSdk({ focusThreadId }: { focusThreadId?: string | null } = {}) {
return (
<div className="view">
{!SHELL && (
@@ -23,26 +23,26 @@ export function InboxSdk() {
Demo mode — running on the SDK&apos;s mock inbox adapter.
</div>
)}
<div className="miu-host miu-host-inbox">{SHELL ? <LiveInbox /> : <DemoInbox />}</div>
<div className="miu-host miu-host-inbox">{SHELL ? <LiveInbox focusThreadId={focusThreadId} /> : <DemoInbox focusThreadId={focusThreadId} />}</div>
</div>
);
}
function DemoInbox() {
function DemoInbox({ focusThreadId }: { focusThreadId?: string | null }) {
const adapter = useMemo<InboxAdapter>(() => new MockInboxAdapter(), []);
return (
<InboxProvider adapter={adapter}>
<SdkInbox />
<SdkInbox focusThreadId={focusThreadId} />
</InboxProvider>
);
}
function LiveInbox() {
function LiveInbox({ focusThreadId }: { focusThreadId?: string | null }) {
const { sdk } = useAppShell();
const adapter = useMemo<InboxAdapter>(() => new CrmInboxAdapter(sdk as unknown as DataDoor), [sdk]);
return (
<InboxProvider adapter={adapter}>
<SdkInbox />
<SdkInbox focusThreadId={focusThreadId} />
</InboxProvider>
);
}
src/components/dashboard/messenger-sdk.tsx
+6 -6
View File
@@ -37,7 +37,7 @@ function useRealtimeSocket(): MessageSocket | null {
const SHELL = isShellConfigured();
export function MessengerSdk() {
export function MessengerSdk({ focusThreadId }: { focusThreadId?: string | null } = {}) {
return (
<div className="view">
{!SHELL && (
@@ -55,23 +55,23 @@ export function MessengerSdk() {
Demo mode — running on the SDK&apos;s mock adapter.
</div>
)}
<div className="miu-host">{SHELL ? <LiveHost /> : <DemoHost />}</div>
<div className="miu-host">{SHELL ? <LiveHost focusThreadId={focusThreadId} /> : <DemoHost focusThreadId={focusThreadId} />}</div>
</div>
);
}
// SHELL is a build-time constant, so exactly one of these mounts for the life of the app
// (Rules-of-Hooks safe — the other branch never renders).
function DemoHost() {
function DemoHost({ focusThreadId }: { focusThreadId?: string | null }) {
const adapter = useMemo<MessagingAdapter>(() => new MockAdapter(), []);
return (
<MessagingProvider adapter={adapter}>
<SdkMessenger />
<SdkMessenger focusThreadId={focusThreadId} />
</MessagingProvider>
);
}
function LiveHost() {
function LiveHost({ focusThreadId }: { focusThreadId?: string | null }) {
const { sdk } = useAppShell();
const { user } = useAuth();
const socket = useRealtimeSocket();
@@ -83,7 +83,7 @@ function LiveHost() {
if (!adapter) return <div className="miu-empty">Loading…</div>;
return (
<MessagingProvider adapter={adapter}>
<SdkMessenger />
<SdkMessenger focusThreadId={focusThreadId} />
</MessagingProvider>
);
}
src/components/dashboard/topbar.tsx
+3 -2
View File
@@ -5,13 +5,14 @@ import { useRouter } from "next/navigation";
import { Sun, Moon, ChevronDown, LogOut } from "lucide-react";
import { useAuth } from "@abe-kap/appshell-sdk/react";
import { Icon } from "./ui";
import { GlobalSearch } from "./global-search";
import { user } from "./account-data";
function initialsOf(name: string): string {
return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase() || "?";
}
export function Topbar({ theme, onToggle, title, subtitle }: { theme: "dark" | "light"; onToggle: () => void; title: string; subtitle: string }) {
export function Topbar({ theme, onToggle, title, subtitle, onNavigate }: { theme: "dark" | "light"; onToggle: () => void; title: string; subtitle: string; onNavigate: (surface: "messenger" | "inbox", threadId: string) => void }) {
// When signed in through the Shell, show the real identity from the App Context
// Envelope; otherwise fall back to the static demo user.
const router = useRouter();
@@ -35,7 +36,7 @@ export function Topbar({ theme, onToggle, title, subtitle }: { theme: "dark" | "
<p>{subtitle}</p>
</div>
<div className="top-actions">
<button className="ic-btn" aria-label="Search"><Icon name="search" size={18} /></button>
<GlobalSearch onNavigate={onNavigate} />
<button className="ic-btn" aria-label="Toggle theme" onClick={onToggle}>
{theme === "dark" ? <Moon size={18} /> : <Sun size={18} />}
</button>