Minor fixes and renaming to new chat ui components

surfsense_web/components/chat_v2/ChatFurtherQuestions.tsx

@@ -2,6 +2,13 @@
 
 import { SuggestedQuestions } from "@llamaindex/chat-ui/widgets";
 import { getAnnotationData, Message, useChatUI } from "@llamaindex/chat-ui";
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Card } from "../ui/card";
 
 export const ChatFurtherQuestions: React.FC<{message: Message}> = ({message}) => {
     const annotations: string[][] = getAnnotationData(message, "FURTHER_QUESTIONS");
@@ -14,5 +21,16 @@ export const ChatFurtherQuestions: React.FC<{message: Message}> = ({message}) =>
         return <></>;
     }
     
-    return <SuggestedQuestions questions={annotations[0]} append={append} requestData={requestData} />;
+    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>
+    );
 };

surfsense_web/components/chat_v2/ChatInputGroup.tsx

@@ -601,7 +601,7 @@ const CustomChatInputOptions = React.memo(
 
 CustomChatInputOptions.displayName = "CustomChatInputOptions";
 
-export const CustomChatInput = React.memo(
+export const ChatInputUI = React.memo(
     ({
         onDocumentSelectionChange,
         selectedDocuments,
@@ -642,4 +642,4 @@ export const CustomChatInput = React.memo(
     }
 );
 
-CustomChatInput.displayName = "CustomChatInput";
+ChatInputUI.displayName = "ChatInputUI";

surfsense_web/components/chat_v2/ChatInterface.tsx

@@ -2,21 +2,13 @@
 
 import React from "react";
 import {
-    ChatSection,
+    ChatSection as LlamaIndexChatSection,
     ChatHandler,
-    ChatCanvas,
-    ChatMessages,
-    useChatUI,
-    ChatMessage,
-    Message,
 } from "@llamaindex/chat-ui";
 import { Document } from "@/hooks/use-documents";
-import { CustomChatInput } from "@/components/chat_v2/ChatInputGroup";
+import { ChatInputUI } from "@/components/chat_v2/ChatInputGroup";
 import { ResearchMode } from "@/components/chat";
-import TerminalDisplay from "@/components/chat_v2/ChatTerminal";
+import { ChatMessagesUI } from "@/components/chat_v2/ChatMessages";
-import ChatSourcesDisplay from "@/components/chat_v2/ChatSources";
-import { CitationDisplay } from "@/components/chat_v2/ChatCitation";
-import { ChatFurtherQuestions } from "@/components/chat_v2/ChatFurtherQuestions";
 
 interface ChatInterfaceProps {
     handler: ChatHandler;
@@ -30,60 +22,6 @@ interface ChatInterfaceProps {
     onResearchModeChange?: (mode: ResearchMode) => void;
 }
  
-
-function ChatMessageDisplay({
-    message,
-    isLast,
-}: {
-    message: Message;
-    isLast: boolean;
-}) {
-    return (
-        <ChatMessage
-            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} />
-                    <ChatMessage.Content className="flex-1">
-                        <ChatMessage.Content.Markdown citationComponent={CitationDisplay} />
-                    </ChatMessage.Content>
-                    <div className="flex flex-row justify-end gap-2">
-                        {isLast && <ChatFurtherQuestions message={message} />}
-                        <ChatMessage.Actions className="flex-1 flex-row" />
-                    </div>
-                </div>
-            ) : (
-                <ChatMessage.Content className="flex-1">
-                    <ChatMessage.Content.Markdown />
-                </ChatMessage.Content>
-            )}
-        </ChatMessage>
-    );
-}
-
-function ChatMessagesDisplay() {
-    const { messages } = useChatUI();
-
-    return (
-        <ChatMessages className="flex-1">
-            <ChatMessages.List className="p-4">
-                {messages.map((message, index) => (
-                    <ChatMessageDisplay
-                        key={`Message-${index}`}
-                        message={message}
-                        isLast={index === messages.length - 1}
-                    />
-                ))}
-            </ChatMessages.List>
-            <ChatMessages.Loading />
-        </ChatMessages>
-    );
-}
-
 export default function ChatInterface({
     handler,
     onDocumentSelectionChange,
@@ -96,11 +34,11 @@ export default function ChatInterface({
     onResearchModeChange,
 }: ChatInterfaceProps) {
     return (
-        <ChatSection handler={handler} className="flex h-full">
+        <LlamaIndexChatSection handler={handler} className="flex h-full">
             <div className="flex flex-1 flex-col">
-                <ChatMessagesDisplay />
+                <ChatMessagesUI />
                 <div className="border-t p-4">
-                    <CustomChatInput
+                    <ChatInputUI
                         onDocumentSelectionChange={onDocumentSelectionChange}
                         selectedDocuments={selectedDocuments}
                         onConnectorSelectionChange={onConnectorSelectionChange}
@@ -113,7 +51,6 @@ export default function ChatInterface({
                 </div>
             </div>
 
-            <ChatCanvas className="w-1/2 border-l" />
+        </LlamaIndexChatSection>
-        </ChatSection>
     );
 }

surfsense_web/components/chat_v2/ChatMessages.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import React from "react";
+import { ChatMessage as LlamaIndexChatMessage, ChatMessages as LlamaIndexChatMessages, Message, useChatUI } from "@llamaindex/chat-ui";
+import TerminalDisplay from "@/components/chat_v2/ChatTerminal";
+import ChatSourcesDisplay from "@/components/chat_v2/ChatSources";
+import { CitationDisplay } from "@/components/chat_v2/ChatCitation";
+import { ChatFurtherQuestions } from "@/components/chat_v2/ChatFurtherQuestions";
+
+export function ChatMessagesUI() {
+    const { messages } = useChatUI();
+
+    return (
+        <LlamaIndexChatMessages className="flex-1">
+            <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: Message;
+    isLast: boolean;
+}) {
+
+    const bottomRef = React.useRef<HTMLDivElement>(null);
+
+    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>
+    );
+}

surfsense_web/components/chat_v2/ChatTerminal.tsx

@@ -6,6 +6,8 @@ import { getAnnotationData, Message } from "@llamaindex/chat-ui";
 export default function TerminalDisplay({ message, open }: { message: Message, open: boolean }) {
     const [isCollapsed, setIsCollapsed] = React.useState(!open);
 
+    const bottomRef = React.useRef<HTMLDivElement>(null);
+
     // Get the last assistant message that's not being typed
     if (!message) {
         return <></>;
@@ -26,6 +28,12 @@ export default function TerminalDisplay({ message, open }: { message: Message, o
         return <></>;
     }
 
+    React.useEffect(() => {
+        if (bottomRef.current) {
+            bottomRef.current.scrollTo({ top: bottomRef.current.scrollHeight, behavior: "smooth" });
+        }
+    }, [events]);
+
     return (
         <div className="bg-gray-900 rounded-lg border border-gray-700 overflow-hidden font-mono text-sm shadow-lg">
             {/* Terminal Header */}
@@ -76,7 +84,7 @@ export default function TerminalDisplay({ message, open }: { message: Message, o
 
             {/* Terminal Content */}
             {!isCollapsed && (
-                <div className="h-64 overflow-y-auto p-4 space-y-1 bg-gray-900">
+                <div ref={bottomRef} className="h-64 overflow-y-auto p-4 space-y-1 bg-gray-900">
                     {events.map((event, index) => (
                         <div
                             key={`${event.id}-${index}`}

surfsense_web/components/ui/accordion.tsx

@@ -2,59 +2,65 @@
 
 import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
+import { ChevronDownIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-const Accordion = AccordionPrimitive.Root
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
 
-const AccordionItem = React.forwardRef<
+function AccordionItem({
-  React.ElementRef<typeof AccordionPrimitive.Item>,
+  className,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+  ...props
->(({ className, ...props }, ref) => (
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  <AccordionPrimitive.Item
+  return (
-    ref={ref}
+    <AccordionPrimitive.Item
-    className={cn("border-b", className)}
+      data-slot="accordion-item"
-    {...props}
+      className={cn("border-b last:border-b-0", className)}
-  />
+      {...props}
-))
+    />
-AccordionItem.displayName = "AccordionItem"
+  )
+}
 
-const AccordionTrigger = React.forwardRef<
+function AccordionTrigger({
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  className,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+  children,
->(({ className, children, ...props }, ref) => (
+  ...props
-  <AccordionPrimitive.Header className="flex">
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-    <AccordionPrimitive.Trigger
+  return (
-      ref={ref}
+    <AccordionPrimitive.Header className="flex">
-      className={cn(
+      <AccordionPrimitive.Trigger
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        data-slot="accordion-trigger"
-        className
+        className={cn(
-      )}
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
       {...props}
     >
-      {children}
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Content>
-    </AccordionPrimitive.Trigger>
+  )
-  </AccordionPrimitive.Header>
+}
-))
-AccordionTrigger.displayName = "AccordionTrigger"
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className={cn(
-      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      className
-    )}
-    {...props}
-  >
-    <div className="pb-4 pt-0">{children}</div>
-  </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = "AccordionContent"
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

surfsense_web/package.json

@@ -27,11 +27,14 @@
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slider": "^1.3.4",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@tabler/icons-react": "^3.30.0",
     "@tanstack/react-table": "^8.21.2",
@@ -43,9 +46,9 @@
     "date-fns": "^4.1.0",
     "emblor": "^1.4.7",
     "framer-motion": "^12.4.7",
-    "fumadocs-core": "^15.2.9",
+    "fumadocs-core": "^15.6.5",
-    "fumadocs-mdx": "^11.6.1",
+    "fumadocs-mdx": "^11.7.0",
-    "fumadocs-ui": "^15.2.9",
+    "fumadocs-ui": "^15.6.5",
     "geist": "^1.3.1",
     "lucide-react": "^0.477.0",
     "next": "15.2.3",