feat: add chat components from jarvis frontend
- Migrated Chat.tsx with message handling and UI structure - Migrated ChatInput.tsx with character limits and keyboard shortcuts - Migrated MessageList.tsx with thinking/reasoning display - Migrated ConversationSidebar.tsx (simplified placeholder) - Migrated BackendStatusBanner.tsx (simplified placeholder) - Created components/chat/index.ts barrel export - Created app/chat/page.tsx placeholder route These components are adapted from jarvis-fe but not yet fully functional: - API calls placeholder (need to wire up /api/brain/query) - Auth hooks stubbed (need useAuth implementation) - Project/conversation hooks stubbed (need implementation) - Imports changed from @jarvis/* to @mosaic/* Next steps: - Implement missing hooks (useAuth, useProjects, useConversations, useApi) - Wire up backend API endpoints - Add proper TypeScript types - Implement full conversation management
This commit is contained in:
Jason Woltje
245
apps/web/src/components/chat/ConversationSidebar.tsx
Normal file
245
apps/web/src/components/chat/ConversationSidebar.tsx
Normal file
@@ -0,0 +1,245 @@
|
||||
"use client";
|
||||
|
||||
import { useState, forwardRef, useImperativeHandle } from "react";
|
||||
// import Link from "next/link";
|
||||
// TODO: Import hooks when they're created
|
||||
// import { useConversations, ConversationSummary } from "@/lib/hooks/useConversations";
|
||||
// import { useProjects } from "@/lib/hooks/useProjects";
|
||||
// import type { IsolationMode } from "@/lib/api";
|
||||
|
||||
// Placeholder types
|
||||
type ConversationSummary = {
|
||||
id: string;
|
||||
title: string | null;
|
||||
project_id: string | null;
|
||||
updated_at: string;
|
||||
message_count: number;
|
||||
};
|
||||
|
||||
export interface ConversationSidebarRef {
|
||||
refresh: () => void;
|
||||
addConversation: (conversation: ConversationSummary) => void;
|
||||
}
|
||||
|
||||
interface ConversationSidebarProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
currentConversationId: string | null;
|
||||
onSelectConversation: (conversationId: string | null) => void;
|
||||
onNewConversation: (projectId?: string | null) => void;
|
||||
}
|
||||
|
||||
export const ConversationSidebar = forwardRef<ConversationSidebarRef, ConversationSidebarProps>(function ConversationSidebar({
|
||||
isOpen,
|
||||
onClose,
|
||||
currentConversationId,
|
||||
onSelectConversation,
|
||||
onNewConversation,
|
||||
}, ref) {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
// Placeholder data
|
||||
const conversations: ConversationSummary[] = [];
|
||||
const projects: any[] = [];
|
||||
|
||||
// Expose methods to parent via ref
|
||||
useImperativeHandle(ref, () => ({
|
||||
refresh: () => {
|
||||
// TODO: Implement refresh logic
|
||||
console.log("Refresh called");
|
||||
},
|
||||
addConversation: (conversation: ConversationSummary) => {
|
||||
// TODO: Implement addConversation logic
|
||||
console.log("Add conversation called:", conversation);
|
||||
},
|
||||
}));
|
||||
|
||||
const filteredConversations = conversations.filter((conv) => {
|
||||
if (!searchQuery.trim()) return true;
|
||||
const title = conv.title || "Untitled conversation";
|
||||
return title.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
});
|
||||
|
||||
const formatRelativeTime = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffMins = Math.floor(diffMs / 60000);
|
||||
const diffHours = Math.floor(diffMs / 3600000);
|
||||
const diffDays = Math.floor(diffMs / 86400000);
|
||||
|
||||
if (diffMins < 1) return "Just now";
|
||||
if (diffMins < 60) return `${diffMins}m ago`;
|
||||
if (diffHours < 24) return `${diffHours}h ago`;
|
||||
if (diffDays < 7) return `${diffDays}d ago`;
|
||||
return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
|
||||
};
|
||||
|
||||
const truncateTitle = (title: string | null, maxLength = 32) => {
|
||||
const displayTitle = title || "Untitled conversation";
|
||||
if (displayTitle.length <= maxLength) return displayTitle;
|
||||
return displayTitle.substring(0, maxLength - 1) + "…";
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile overlay */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-40 md:hidden animate-fade-in"
|
||||
style={{ backgroundColor: "rgb(0 0 0 / 0.6)" }}
|
||||
onClick={onClose}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sidebar */}
|
||||
<aside
|
||||
className={`
|
||||
fixed left-0 top-0 z-50 h-screen transform border-r transition-all duration-200 ease-out flex flex-col
|
||||
md:sticky md:top-0 md:z-auto md:h-screen md:transform-none md:transition-[width]
|
||||
${isOpen ? "translate-x-0 w-72" : "-translate-x-full md:translate-x-0 md:w-16"}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: "rgb(var(--surface-0))",
|
||||
borderColor: "rgb(var(--border-default))",
|
||||
}}
|
||||
aria-label="Conversation history"
|
||||
>
|
||||
{/* Collapsed view - TODO: Implement */}
|
||||
{!isOpen && (
|
||||
<div className="hidden md:flex flex-col items-center py-3 h-full">
|
||||
<button
|
||||
onClick={() => onNewConversation()}
|
||||
className="p-3 rounded-lg transition-colors"
|
||||
title="New Conversation"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Full sidebar content */}
|
||||
{isOpen && (
|
||||
<>
|
||||
{/* Header */}
|
||||
<div
|
||||
className="flex items-center justify-between border-b px-4 py-3"
|
||||
style={{ borderColor: "rgb(var(--border-default))" }}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<svg
|
||||
className="h-5 w-5"
|
||||
style={{ color: "rgb(var(--text-muted))" }}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
>
|
||||
<path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
<span className="text-sm font-semibold" style={{ color: "rgb(var(--text-primary))" }}>
|
||||
Conversations
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button onClick={onClose} className="btn-ghost rounded-md p-1.5" aria-label="Close sidebar">
|
||||
<svg className="h-5 w-5" style={{ color: "rgb(var(--text-muted))" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* New Chat Button */}
|
||||
<div className="px-3 pt-3">
|
||||
<button
|
||||
onClick={() => onNewConversation()}
|
||||
className="w-full flex items-center justify-center gap-2 rounded-lg border border-dashed py-2.5 text-sm font-medium transition-all duration-150 hover:border-solid"
|
||||
style={{
|
||||
borderColor: "rgb(var(--border-strong))",
|
||||
color: "rgb(var(--text-secondary))",
|
||||
}}
|
||||
>
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
<span>New Conversation</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="px-3 pt-3">
|
||||
<div className="relative">
|
||||
<svg
|
||||
className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2"
|
||||
style={{ color: "rgb(var(--text-muted))" }}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<path d="M21 21l-4.35-4.35" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search conversations..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="input pl-9 pr-10 py-2 text-sm"
|
||||
style={{ backgroundColor: "rgb(var(--surface-1))" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conversations List */}
|
||||
<div className="flex-1 overflow-y-auto px-3 pt-3 pb-3 space-y-1">
|
||||
{filteredConversations.length === 0 ? (
|
||||
<div className="text-center py-8" style={{ color: "rgb(var(--text-muted))" }}>
|
||||
<p className="text-sm">No conversations yet</p>
|
||||
<p className="text-xs mt-1">Start a new chat to begin</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredConversations.map((conv) => (
|
||||
<button
|
||||
key={conv.id}
|
||||
onClick={() => onSelectConversation(conv.id)}
|
||||
className={`w-full text-left px-3 py-2 rounded-lg transition-colors ${
|
||||
conv.id === currentConversationId
|
||||
? "bg-[rgb(var(--accent-primary-light))]"
|
||||
: "hover:bg-[rgb(var(--surface-2))]"
|
||||
}`}
|
||||
>
|
||||
<p
|
||||
className="text-sm font-medium truncate"
|
||||
style={{
|
||||
color: conv.id === currentConversationId
|
||||
? "rgb(var(--accent-primary))"
|
||||
: "rgb(var(--text-primary))",
|
||||
}}
|
||||
>
|
||||
{truncateTitle(conv.title)}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 mt-0.5" style={{ color: "rgb(var(--text-muted))" }}>
|
||||
<span className="text-xs">{formatRelativeTime(conv.updated_at)}</span>
|
||||
{conv.message_count > 0 && (
|
||||
<>
|
||||
<span className="text-xs">·</span>
|
||||
<span className="text-xs">
|
||||
{conv.message_count} msg{conv.message_count !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user