fixed navigation style to not placeholder for new conversation, not show loading state, and to show correct files
This commit is contained in:
Lucas Oliveira
parent
68db630a27
commit
8a7cef695e
1 changed files with 17 additions and 75 deletions
|
|
@ -431,35 +431,22 @@ export function Navigation({
|
||||||
|
|
||||||
<div className="flex-1 min-h-0 overflow-y-auto scrollbar-hide">
|
<div className="flex-1 min-h-0 overflow-y-auto scrollbar-hide">
|
||||||
<div className="space-y-1 flex flex-col">
|
<div className="space-y-1 flex flex-col">
|
||||||
{loadingNewConversation || isConversationsLoading ? (
|
{/* Show skeleton loaders when loading and no conversations exist */}
|
||||||
<div className="text-[13px] text-muted-foreground p-2">
|
{isConversationsLoading && conversations.length === 0 ? (
|
||||||
Loading...
|
|
||||||
</div>
|
[0,1].map((skeletonIndex) => (
|
||||||
|
<div
|
||||||
|
key={`conversation-skeleton-${skeletonIndex}`}
|
||||||
|
className={cn("w-full px-3 h-11 rounded-lg animate-pulse", skeletonIndex === 0 ? "bg-accent/50" : "")}
|
||||||
|
>
|
||||||
|
<div className="h-3 bg-muted-foreground/20 rounded w-3/4 mt-3.5" />
|
||||||
|
</div>
|
||||||
|
))
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{/* Show placeholder conversation if it exists */}
|
|
||||||
{placeholderConversation && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="w-full px-3 rounded-lg bg-accent border border-dashed border-accent cursor-pointer group text-left h-[44px]"
|
|
||||||
onClick={() => {
|
|
||||||
// Don't load placeholder as a real conversation, just focus the input
|
|
||||||
if (typeof window !== "undefined") {
|
|
||||||
window.dispatchEvent(new CustomEvent("focusInput"));
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="text-[13px] font-medium text-foreground truncate">
|
|
||||||
{placeholderConversation.title}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-muted-foreground">
|
|
||||||
Start typing to begin...
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Show regular conversations */}
|
{/* Show regular conversations */}
|
||||||
{conversations.length === 0 && !placeholderConversation ? (
|
{conversations.length === 0 && !isConversationsLoading ? (
|
||||||
<div className="text-[13px] text-muted-foreground py-2 pl-3">
|
<div className="text-[13px] text-muted-foreground py-2 pl-3">
|
||||||
No conversations yet
|
No conversations yet
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -469,7 +456,7 @@ export function Navigation({
|
||||||
key={conversation.response_id}
|
key={conversation.response_id}
|
||||||
type="button"
|
type="button"
|
||||||
className={`w-full px-3 h-11 rounded-lg group relative text-left ${
|
className={`w-full px-3 h-11 rounded-lg group relative text-left ${
|
||||||
loading
|
loading || isConversationsLoading
|
||||||
? "opacity-50 cursor-not-allowed"
|
? "opacity-50 cursor-not-allowed"
|
||||||
: "hover:bg-accent cursor-pointer"
|
: "hover:bg-accent cursor-pointer"
|
||||||
} ${
|
} ${
|
||||||
|
|
@ -478,11 +465,11 @@ export function Navigation({
|
||||||
: ""
|
: ""
|
||||||
}`}
|
}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (loading) return;
|
if (loading || isConversationsLoading) return;
|
||||||
loadConversation(conversation);
|
loadConversation(conversation);
|
||||||
refreshConversations();
|
refreshConversations();
|
||||||
}}
|
}}
|
||||||
disabled={loading}
|
disabled={loading || isConversationsLoading}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
|
|
@ -493,7 +480,7 @@ export function Navigation({
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger
|
<DropdownMenuTrigger
|
||||||
disabled={
|
disabled={
|
||||||
loading || deleteSessionMutation.isPending
|
loading || isConversationsLoading || deleteSessionMutation.isPending
|
||||||
}
|
}
|
||||||
asChild
|
asChild
|
||||||
>
|
>
|
||||||
|
|
@ -543,51 +530,6 @@ export function Navigation({
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Conversation Knowledge Section - appears right after last conversation
|
|
||||||
<div className="flex-shrink-0 mt-4">
|
|
||||||
<div className="flex items-center justify-between mb-3 mx-3">
|
|
||||||
<h3 className="text-xs font-medium text-muted-foreground">
|
|
||||||
Conversation knowledge
|
|
||||||
</h3>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleFilePickerClick}
|
|
||||||
className="p-1 hover:bg-accent rounded"
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4 text-muted-foreground" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
ref={fileInputRef}
|
|
||||||
type="file"
|
|
||||||
onChange={handleFilePickerChange}
|
|
||||||
className="hidden"
|
|
||||||
accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
|
|
||||||
/>
|
|
||||||
<div className="overflow-y-auto scrollbar-hide space-y-1">
|
|
||||||
{conversationDocs.length === 0 ? (
|
|
||||||
<div className="text-[13px] text-muted-foreground py-2 px-3">
|
|
||||||
No documents yet
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
conversationDocs.map(doc => (
|
|
||||||
<div
|
|
||||||
key={`${doc.filename}-${doc.uploadTime.getTime()}`}
|
|
||||||
className="w-full px-3 h-11 rounded-lg hover:bg-accent cursor-pointer group flex items-center"
|
|
||||||
>
|
|
||||||
<FileText className="h-4 w-4 mr-2 text-muted-foreground flex-shrink-0" />
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="text-sm text-foreground truncate">
|
|
||||||
{doc.filename}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div> */}
|
|
||||||
<div className="flex-shrink-0 mt-4">
|
<div className="flex-shrink-0 mt-4">
|
||||||
<div className="flex items-center justify-between mb-3 mx-3">
|
<div className="flex items-center justify-between mb-3 mx-3">
|
||||||
<h3 className="text-xs font-medium text-muted-foreground">
|
<h3 className="text-xs font-medium text-muted-foreground">
|
||||||
|
|
@ -595,7 +537,7 @@ export function Navigation({
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="overflow-y-auto scrollbar-hide space-y-1">
|
<div className="overflow-y-auto scrollbar-hide space-y-1">
|
||||||
{newConversationFiles?.length === 0 ? (
|
{(newConversationFiles?.length ?? 0) === 0 ? (
|
||||||
<div className="text-[13px] text-muted-foreground py-2 px-3">
|
<div className="text-[13px] text-muted-foreground py-2 px-3">
|
||||||
No documents yet
|
No documents yet
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue