mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-06-06 20:15:17 +02:00
feat: add react-rough-notation dependency and update chat components for improved UI
This commit is contained in:
MSI\ModSetter
parent
237e11f2ae
commit
1e05c5e9da
6 changed files with 360 additions and 252 deletions
84
surfsense_web/components/chat/AnimatedEmptyState.tsx
Normal file
84
surfsense_web/components/chat/AnimatedEmptyState.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
"use client";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Manrope } from "next/font/google";
|
||||
import React, { useRef, useEffect, useState } from "react";
|
||||
import { RoughNotation, RoughNotationGroup } from "react-rough-notation";
|
||||
import { useInView } from "framer-motion";
|
||||
import { useSidebar } from "@/components/ui/sidebar";
|
||||
|
||||
const manrope = Manrope({ subsets: ["latin"], weight: ["400", "700"] });
|
||||
|
||||
export function AnimatedEmptyState() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref);
|
||||
const { state } = useSidebar();
|
||||
const [shouldShowHighlight, setShouldShowHighlight] = useState(false);
|
||||
const [layoutStable, setLayoutStable] = useState(true);
|
||||
|
||||
// Track sidebar state changes and manage highlight visibility
|
||||
useEffect(() => {
|
||||
// Set layout as unstable when sidebar state changes
|
||||
setLayoutStable(false);
|
||||
setShouldShowHighlight(false);
|
||||
|
||||
// Wait for layout to stabilize after sidebar transition
|
||||
const stabilizeTimer = setTimeout(() => {
|
||||
setLayoutStable(true);
|
||||
}, 300); // Wait for sidebar transition (200ms) + buffer
|
||||
|
||||
return () => clearTimeout(stabilizeTimer);
|
||||
}, [state]);
|
||||
|
||||
// Re-enable highlights after layout stabilizes and component is in view
|
||||
useEffect(() => {
|
||||
if (layoutStable && isInView) {
|
||||
const showTimer = setTimeout(() => {
|
||||
setShouldShowHighlight(true);
|
||||
}, 100); // Small delay to ensure layout is fully settled
|
||||
|
||||
return () => clearTimeout(showTimer);
|
||||
} else {
|
||||
setShouldShowHighlight(false);
|
||||
}
|
||||
}, [layoutStable, isInView]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="flex-1 flex items-center justify-center w-full min-h-[400px]"
|
||||
>
|
||||
<div className="max-w-4xl mx-auto px-4 py-10 text-center">
|
||||
<RoughNotationGroup show={shouldShowHighlight}>
|
||||
<h1
|
||||
className={cn(
|
||||
"text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50 mb-6",
|
||||
manrope.className,
|
||||
)}
|
||||
>
|
||||
<RoughNotation
|
||||
type="highlight"
|
||||
animationDuration={2000}
|
||||
iterations={3}
|
||||
color="#3b82f680"
|
||||
multiline
|
||||
>
|
||||
<span>SurfSense</span>
|
||||
</RoughNotation>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg sm:text-xl text-neutral-600 dark:text-neutral-300 mb-8 max-w-2xl mx-auto">
|
||||
<RoughNotation
|
||||
type="underline"
|
||||
animationDuration={2000}
|
||||
iterations={3}
|
||||
color="#10b981"
|
||||
>
|
||||
Let's Start Surfing
|
||||
</RoughNotation>{" "}
|
||||
through your knowledge base.
|
||||
</p>
|
||||
</RoughNotationGroup>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,43 +3,43 @@
|
|||
import { SuggestedQuestions } from "@llamaindex/chat-ui/widgets";
|
||||
import { getAnnotationData, Message, useChatUI } from "@llamaindex/chat-ui";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
|
||||
export const ChatFurtherQuestions: React.FC<{ message: Message }> = ({
|
||||
message,
|
||||
message,
|
||||
}) => {
|
||||
const annotations: string[][] = getAnnotationData(
|
||||
message,
|
||||
"FURTHER_QUESTIONS",
|
||||
);
|
||||
const { append, requestData } = useChatUI();
|
||||
const annotations: string[][] = getAnnotationData(
|
||||
message,
|
||||
"FURTHER_QUESTIONS",
|
||||
);
|
||||
const { append, requestData } = useChatUI();
|
||||
|
||||
if (annotations.length !== 1 || annotations[0].length === 0) {
|
||||
return <></>;
|
||||
}
|
||||
if (annotations.length !== 1 || annotations[0].length === 0) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Accordion
|
||||
type="single"
|
||||
collapsible
|
||||
className="w-full px-2 border-2 rounded-lg shadow-lg"
|
||||
>
|
||||
<AccordionItem value="suggested-questions">
|
||||
<AccordionTrigger className="text-sm font-semibold">
|
||||
Suggested Questions
|
||||
</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<SuggestedQuestions
|
||||
questions={annotations[0]}
|
||||
append={append}
|
||||
requestData={requestData}
|
||||
/>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
return (
|
||||
<Accordion
|
||||
type="single"
|
||||
collapsible
|
||||
className="w-full border rounded-md bg-card shadow-sm"
|
||||
>
|
||||
<AccordionItem value="suggested-questions" className="border-0">
|
||||
<AccordionTrigger className="px-4 py-3 text-sm font-medium text-foreground transition-colors">
|
||||
Further Suggested Questions
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="px-4 pb-4 pt-0">
|
||||
<SuggestedQuestions
|
||||
questions={annotations[0]}
|
||||
append={append}
|
||||
requestData={requestData}
|
||||
/>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,77 +2,80 @@
|
|||
|
||||
import React from "react";
|
||||
import {
|
||||
ChatMessage as LlamaIndexChatMessage,
|
||||
ChatMessages as LlamaIndexChatMessages,
|
||||
Message,
|
||||
useChatUI,
|
||||
ChatMessage as LlamaIndexChatMessage,
|
||||
ChatMessages as LlamaIndexChatMessages,
|
||||
Message,
|
||||
useChatUI,
|
||||
} from "@llamaindex/chat-ui";
|
||||
import TerminalDisplay from "@/components/chat/ChatTerminal";
|
||||
import ChatSourcesDisplay from "@/components/chat/ChatSources";
|
||||
import { CitationDisplay } from "@/components/chat/ChatCitation";
|
||||
import { ChatFurtherQuestions } from "@/components/chat/ChatFurtherQuestions";
|
||||
import { AnimatedEmptyState } from "@/components/chat/AnimatedEmptyState";
|
||||
|
||||
export function ChatMessagesUI() {
|
||||
const { messages } = useChatUI();
|
||||
const { messages } = useChatUI();
|
||||
|
||||
return (
|
||||
<LlamaIndexChatMessages className="flex-1">
|
||||
<LlamaIndexChatMessages.Empty heading="Welcome to Surfsense!" subheading="Ask me anything from your documents" />
|
||||
<LlamaIndexChatMessages.List className="p-4">
|
||||
{messages.map((message, index) => (
|
||||
<ChatMessageUI
|
||||
key={`Message-${index}`}
|
||||
message={message}
|
||||
isLast={index === messages.length - 1}
|
||||
/>
|
||||
))}
|
||||
</LlamaIndexChatMessages.List>
|
||||
<LlamaIndexChatMessages.Loading />
|
||||
</LlamaIndexChatMessages>
|
||||
);
|
||||
return (
|
||||
<LlamaIndexChatMessages className="flex-1">
|
||||
<LlamaIndexChatMessages.Empty>
|
||||
<AnimatedEmptyState />
|
||||
</LlamaIndexChatMessages.Empty>
|
||||
<LlamaIndexChatMessages.List className="p-4">
|
||||
{messages.map((message, index) => (
|
||||
<ChatMessageUI
|
||||
key={`Message-${index}`}
|
||||
message={message}
|
||||
isLast={index === messages.length - 1}
|
||||
/>
|
||||
))}
|
||||
</LlamaIndexChatMessages.List>
|
||||
<LlamaIndexChatMessages.Loading />
|
||||
</LlamaIndexChatMessages>
|
||||
);
|
||||
}
|
||||
|
||||
function ChatMessageUI({
|
||||
message,
|
||||
isLast,
|
||||
message,
|
||||
isLast,
|
||||
}: {
|
||||
message: Message;
|
||||
isLast: boolean;
|
||||
message: Message;
|
||||
isLast: boolean;
|
||||
}) {
|
||||
const bottomRef = React.useRef<HTMLDivElement>(null);
|
||||
const bottomRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isLast && bottomRef.current) {
|
||||
bottomRef.current.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
}, [message]);
|
||||
React.useEffect(() => {
|
||||
if (isLast && bottomRef.current) {
|
||||
bottomRef.current.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
}, [message]);
|
||||
|
||||
return (
|
||||
<LlamaIndexChatMessage
|
||||
message={message}
|
||||
isLast={isLast}
|
||||
className="flex flex-col "
|
||||
>
|
||||
{message.role === "assistant" ? (
|
||||
<div className="flex-1 flex flex-col space-y-4">
|
||||
<TerminalDisplay message={message} open={isLast} />
|
||||
<ChatSourcesDisplay message={message} />
|
||||
<LlamaIndexChatMessage.Content className="flex-1">
|
||||
<LlamaIndexChatMessage.Content.Markdown
|
||||
citationComponent={CitationDisplay}
|
||||
/>
|
||||
</LlamaIndexChatMessage.Content>
|
||||
<div ref={bottomRef} />
|
||||
<div className="flex flex-row justify-end gap-2">
|
||||
{isLast && <ChatFurtherQuestions message={message} />}
|
||||
<LlamaIndexChatMessage.Actions className="flex-1 flex-col" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<LlamaIndexChatMessage.Content className="flex-1">
|
||||
<LlamaIndexChatMessage.Content.Markdown />
|
||||
</LlamaIndexChatMessage.Content>
|
||||
)}
|
||||
</LlamaIndexChatMessage>
|
||||
);
|
||||
return (
|
||||
<LlamaIndexChatMessage
|
||||
message={message}
|
||||
isLast={isLast}
|
||||
className="flex flex-col "
|
||||
>
|
||||
{message.role === "assistant" ? (
|
||||
<div className="flex-1 flex flex-col space-y-4">
|
||||
<TerminalDisplay message={message} open={isLast} />
|
||||
<ChatSourcesDisplay message={message} />
|
||||
<LlamaIndexChatMessage.Content className="flex-1">
|
||||
<LlamaIndexChatMessage.Content.Markdown
|
||||
citationComponent={CitationDisplay}
|
||||
/>
|
||||
</LlamaIndexChatMessage.Content>
|
||||
<div ref={bottomRef} />
|
||||
<div className="flex flex-row justify-end gap-2">
|
||||
{isLast && <ChatFurtherQuestions message={message} />}
|
||||
<LlamaIndexChatMessage.Actions className="flex-1 flex-col" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<LlamaIndexChatMessage.Content className="flex-1">
|
||||
<LlamaIndexChatMessage.Content.Markdown />
|
||||
</LlamaIndexChatMessage.Content>
|
||||
)}
|
||||
</LlamaIndexChatMessage>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue