feat(24-02): UI components — ChatSearchDialog, ChatMessageBookmark, ChatBookmarkList, ChatBranchSelector
- ChatSearchDialog: CommandDialog with shouldFilter=false for server-side FTS, term highlighting via React components - ChatMessageBookmark: ghost icon button with fill-current for bookmarked state, aria-label toggle - ChatBookmarkList: scrollable list with skeleton loading, empty state, navigation callbacks - ChatBranchSelector: horizontal branch picker bar with GitBranch icon, active branch highlight
This commit is contained in:
Nexus Dev
parent
505f5e2262
commit
ac6d75ab0d
4 changed files with 299 additions and 0 deletions
64
ui/src/components/ChatBookmarkList.tsx
Normal file
64
ui/src/components/ChatBookmarkList.tsx
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import { Bookmark } from "lucide-react";
|
||||
import { useChatBookmarks } from "../hooks/useChatBookmarks";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
interface ChatBookmarkListProps {
|
||||
companyId: string;
|
||||
onNavigate: (conversationId: string, messageId: string) => void;
|
||||
}
|
||||
|
||||
function formatRelativeTime(dateStr: string): string {
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffMin = Math.floor(diffMs / 60000);
|
||||
if (diffMin < 1) return "just now";
|
||||
if (diffMin < 60) return `${diffMin}m ago`;
|
||||
const diffHr = Math.floor(diffMin / 60);
|
||||
if (diffHr < 24) return `${diffHr}h ago`;
|
||||
const diffDays = Math.floor(diffHr / 24);
|
||||
if (diffDays < 30) return `${diffDays}d ago`;
|
||||
return date.toLocaleDateString();
|
||||
}
|
||||
|
||||
export function ChatBookmarkList({ companyId, onNavigate }: ChatBookmarkListProps) {
|
||||
const { data, isLoading } = useChatBookmarks(companyId);
|
||||
const bookmarks = data?.items ?? [];
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-full">
|
||||
<div className="p-1 space-y-0.5">
|
||||
{isLoading ? (
|
||||
Array.from({ length: 4 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-14 w-full rounded" />
|
||||
))
|
||||
) : bookmarks.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-10 gap-2 text-muted-foreground">
|
||||
<Bookmark className="h-8 w-8 opacity-30" />
|
||||
<p className="text-sm">No bookmarks yet</p>
|
||||
</div>
|
||||
) : (
|
||||
bookmarks.map((bookmark) => (
|
||||
<button
|
||||
key={bookmark.id}
|
||||
type="button"
|
||||
className="w-full text-left px-2 py-2 rounded hover:bg-accent transition-colors"
|
||||
onClick={() => onNavigate(bookmark.conversationId, bookmark.message.id)}
|
||||
>
|
||||
<p className="text-xs text-muted-foreground truncate mb-0.5">
|
||||
{bookmark.conversationTitle ?? "Untitled conversation"}
|
||||
</p>
|
||||
<p className="text-sm text-foreground line-clamp-2">
|
||||
{bookmark.message.content.slice(0, 120)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{formatRelativeTime(bookmark.createdAt)}
|
||||
</p>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
62
ui/src/components/ChatBranchSelector.tsx
Normal file
62
ui/src/components/ChatBranchSelector.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import { GitBranch } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ChatConversation } from "@paperclipai/shared";
|
||||
|
||||
interface ChatBranchSelectorProps {
|
||||
conversationId: string;
|
||||
branches: ChatConversation[];
|
||||
activeBranchId: string | null;
|
||||
onSelectBranch: (id: string) => void;
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
return new Date(dateStr).toLocaleDateString(undefined, { month: "short", day: "numeric" });
|
||||
}
|
||||
|
||||
export function ChatBranchSelector({
|
||||
conversationId,
|
||||
branches,
|
||||
activeBranchId,
|
||||
onSelectBranch,
|
||||
}: ChatBranchSelectorProps) {
|
||||
if (branches.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 px-2 py-1 border-b border-border overflow-x-auto">
|
||||
<GitBranch className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
<span className="text-xs text-muted-foreground shrink-0 mr-1">Branch:</span>
|
||||
|
||||
{/* Original conversation */}
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"shrink-0 rounded px-2 py-0.5 text-xs transition-colors",
|
||||
activeBranchId === null || activeBranchId === conversationId
|
||||
? "bg-accent text-accent-foreground"
|
||||
: "hover:bg-accent/50 text-muted-foreground",
|
||||
)}
|
||||
onClick={() => onSelectBranch(conversationId)}
|
||||
title="Original conversation"
|
||||
>
|
||||
Original
|
||||
</button>
|
||||
|
||||
{branches.map((branch, index) => (
|
||||
<button
|
||||
key={branch.id}
|
||||
type="button"
|
||||
className={cn(
|
||||
"shrink-0 rounded px-2 py-0.5 text-xs transition-colors",
|
||||
activeBranchId === branch.id
|
||||
? "bg-accent text-accent-foreground"
|
||||
: "hover:bg-accent/50 text-muted-foreground",
|
||||
)}
|
||||
onClick={() => onSelectBranch(branch.id)}
|
||||
title={`Created ${formatDate(branch.createdAt)}`}
|
||||
>
|
||||
{branch.title ?? `Branch ${index + 1}`}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
35
ui/src/components/ChatMessageBookmark.tsx
Normal file
35
ui/src/components/ChatMessageBookmark.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { Bookmark } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface ChatMessageBookmarkProps {
|
||||
messageId: string;
|
||||
conversationId: string;
|
||||
isBookmarked: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
export function ChatMessageBookmark({ isBookmarked, onToggle }: ChatMessageBookmarkProps) {
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6"
|
||||
onClick={onToggle}
|
||||
aria-label={isBookmarked ? "Remove bookmark" : "Bookmark message"}
|
||||
>
|
||||
<Bookmark
|
||||
className={cn(
|
||||
"h-3.5 w-3.5",
|
||||
isBookmarked && "fill-current",
|
||||
)}
|
||||
/>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{isBookmarked ? "Remove bookmark" : "Bookmark message"}</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
138
ui/src/components/ChatSearchDialog.tsx
Normal file
138
ui/src/components/ChatSearchDialog.tsx
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
import { useState } from "react";
|
||||
import { Search } from "lucide-react";
|
||||
import { useChatSearch } from "../hooks/useChatSearch";
|
||||
import {
|
||||
CommandDialog,
|
||||
CommandEmpty,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import { Command } from "cmdk";
|
||||
|
||||
interface ChatSearchDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
companyId: string | null;
|
||||
onNavigate: (conversationId: string, messageId: string) => void;
|
||||
}
|
||||
|
||||
function stripMarkdown(text: string): string {
|
||||
return text
|
||||
.replace(/```[\s\S]*?```/g, "")
|
||||
.replace(/`[^`]+`/g, "")
|
||||
.replace(/\*\*([^*]+)\*\*/g, "$1")
|
||||
.replace(/\*([^*]+)\*/g, "$1")
|
||||
.replace(/#{1,6}\s/g, "")
|
||||
.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
|
||||
.replace(/>\s/g, "")
|
||||
.trim();
|
||||
}
|
||||
|
||||
/** Split text into segments, marking portions that match the query terms */
|
||||
function splitWithHighlight(text: string, query: string): Array<{ text: string; highlight: boolean }> {
|
||||
if (!query.trim()) return [{ text, highlight: false }];
|
||||
const terms = query.trim().split(/\s+/).filter(Boolean);
|
||||
const pattern = terms.map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
|
||||
const re = new RegExp(`(${pattern})`, "gi");
|
||||
const parts = text.split(re);
|
||||
return parts.map((part) => ({
|
||||
text: part,
|
||||
highlight: re.test(part),
|
||||
}));
|
||||
}
|
||||
|
||||
function HighlightedText({ text, query }: { text: string; query: string }) {
|
||||
const segments = splitWithHighlight(text, query);
|
||||
return (
|
||||
<>
|
||||
{segments.map((seg, i) =>
|
||||
seg.highlight ? (
|
||||
<mark key={i} className="bg-yellow-200 dark:bg-yellow-800 rounded-sm">
|
||||
{seg.text}
|
||||
</mark>
|
||||
) : (
|
||||
<span key={i}>{seg.text}</span>
|
||||
),
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function formatRelativeTime(dateStr: string): string {
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffMin = Math.floor(diffMs / 60000);
|
||||
if (diffMin < 1) return "just now";
|
||||
if (diffMin < 60) return `${diffMin}m ago`;
|
||||
const diffHr = Math.floor(diffMin / 60);
|
||||
if (diffHr < 24) return `${diffHr}h ago`;
|
||||
const diffDays = Math.floor(diffHr / 24);
|
||||
if (diffDays < 30) return `${diffDays}d ago`;
|
||||
return date.toLocaleDateString();
|
||||
}
|
||||
|
||||
export function ChatSearchDialog({ open, onOpenChange, companyId, onNavigate }: ChatSearchDialogProps) {
|
||||
const [query, setQuery] = useState("");
|
||||
const { data } = useChatSearch(companyId, query);
|
||||
const results = data?.items ?? [];
|
||||
|
||||
function handleSelect(conversationId: string, messageId: string) {
|
||||
onNavigate(conversationId, messageId);
|
||||
onOpenChange(false);
|
||||
setQuery("");
|
||||
}
|
||||
|
||||
return (
|
||||
<CommandDialog
|
||||
open={open}
|
||||
onOpenChange={(v) => {
|
||||
onOpenChange(v);
|
||||
if (!v) setQuery("");
|
||||
}}
|
||||
title="Search messages"
|
||||
description="Search all messages across conversations"
|
||||
>
|
||||
<Command shouldFilter={false}>
|
||||
<CommandInput
|
||||
placeholder="Search all messages..."
|
||||
value={query}
|
||||
onValueChange={setQuery}
|
||||
/>
|
||||
<CommandList>
|
||||
{query.trim().length >= 2 && results.length === 0 && (
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
)}
|
||||
{results.map((result) => {
|
||||
const snippet = stripMarkdown(result.content).slice(0, 120);
|
||||
return (
|
||||
<CommandItem
|
||||
key={result.messageId}
|
||||
value={result.messageId}
|
||||
onSelect={() => handleSelect(result.conversationId, result.messageId)}
|
||||
className="flex flex-col items-start gap-0.5 py-2"
|
||||
>
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<Search className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
<span className="text-xs text-muted-foreground truncate flex-1">
|
||||
{result.conversationTitle ?? "Untitled conversation"}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground shrink-0 capitalize">
|
||||
{result.role}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground shrink-0">
|
||||
{formatRelativeTime(result.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="pl-5 text-sm text-foreground line-clamp-2">
|
||||
<HighlightedText text={snippet} query={query} />
|
||||
</p>
|
||||
</CommandItem>
|
||||
);
|
||||
})}
|
||||
</CommandList>
|
||||
</Command>
|
||||
</CommandDialog>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue