Added Further question component and streaming fix

surfsense_backend/app/services/streaming_service.py

@@ -132,7 +132,14 @@ class StreamingService:
         self.message_annotations[3]["content"] = further_questions
 
         # Return only the delta annotation
-        annotation = {"type": "FURTHER_QUESTIONS", "content": further_questions}
+        annotation = {
+            "type": "FURTHER_QUESTIONS",
+            "data": [
+                question.get("question", "")
+                for question in further_questions
+                if question.get("question", "") != ""
+            ],
+        }
         return f"8:[{json.dumps(annotation)}]\n"
 
     def format_text_chunk(self, text: str) -> str:

surfsense_web/components/chat_v2/ChatCitation.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import React from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { ExternalLink } from "lucide-react";
+
+export const CitationDisplay: React.FC<{index: number, node: any}> = ({index, node}) => {
+
+    const truncateText = (text: string, maxLength: number = 200) => {
+        if (text.length <= maxLength) return text;
+        return text.substring(0, maxLength) + '...';
+    };
+
+    const handleUrlClick = (e: React.MouseEvent, url: string) => {
+        e.preventDefault();
+        e.stopPropagation();
+        window.open(url, '_blank', 'noopener,noreferrer');
+    };
+
+    return (
+        <Popover >
+            <PopoverTrigger asChild >
+                <span className="text-[10px] font-bold bg-slate-500 hover:bg-slate-600 text-white rounded-full w-4 h-4 inline-flex items-center justify-center align-super cursor-pointer transition-colors">
+                    {index + 1}
+                </span>
+            </PopoverTrigger>
+            <PopoverContent className="w-80 p-4 space-y-3 relative" align="start" >
+                {/* External Link Button - Top Right */}
+                {node?.url && (
+                    <button
+                        onClick={(e) => handleUrlClick(e, node.url)}
+                        className="absolute top-3 right-3 inline-flex items-center justify-center w-6 h-6 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded transition-colors"
+                        title="Open in new tab"
+                    >
+                        <ExternalLink size={14} />
+                    </button>
+                )}
+                
+                {/* Heading */}
+                <div className="text-sm font-semibold text-slate-900 dark:text-slate-100 pr-8">
+                    {node?.metadata?.group_name || 'Source'}
+                </div>
+                
+                {/* Source */}
+                <div className="text-xs text-slate-600 dark:text-slate-400 font-medium">
+                    {node?.metadata?.title || 'Untitled'}
+                </div>
+                
+                {/* Body */}
+                <div className="text-xs text-slate-700 dark:text-slate-300 leading-relaxed">
+                    {truncateText(node?.text || 'No content available')}
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}

surfsense_web/components/chat_v2/ChatFurtherQuestions.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { SuggestedQuestions } from "@llamaindex/chat-ui/widgets";
+import { getAnnotationData, Message, useChatUI } from "@llamaindex/chat-ui";
+
+export const ChatFurtherQuestions: React.FC<{message: Message}> = ({message}) => {
+    const annotations: string[][] = getAnnotationData(message, "FURTHER_QUESTIONS");
+    const { append, requestData } = useChatUI();
+
+    console.log('🔥 annotations', annotations);
+    
+
+    if (annotations.length !== 1 || annotations[0].length === 0) {
+        return <></>;
+    }
+    
+    return <SuggestedQuestions questions={annotations[0]} append={append} requestData={requestData} />;
+};

surfsense_web/components/chat_v2/ChatInterface.tsx

@@ -9,15 +9,14 @@ import {
     useChatUI,
     ChatMessage,
     Message,
-    getAnnotationData,
 } from "@llamaindex/chat-ui";
 import { Document } from "@/hooks/use-documents";
 import { CustomChatInput } from "@/components/chat_v2/ChatInputGroup";
 import { ResearchMode } from "@/components/chat";
 import TerminalDisplay from "@/components/chat_v2/ChatTerminal";
 import ChatSourcesDisplay from "@/components/chat_v2/ChatSources";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { CitationDisplay } from "@/components/chat_v2/ChatCitation";
-import { ExternalLink } from "lucide-react";
+import { ChatFurtherQuestions } from "@/components/chat_v2/ChatFurtherQuestions";
 
 interface ChatInterfaceProps {
     handler: ChatHandler;
@@ -31,58 +30,6 @@ interface ChatInterfaceProps {
     onResearchModeChange?: (mode: ResearchMode) => void;
 }
  
-const CitationDisplay: React.FC<{index: number, node: any}> = ({index, node}) => {
-
-
-    const truncateText = (text: string, maxLength: number = 200) => {
-        if (text.length <= maxLength) return text;
-        return text.substring(0, maxLength) + '...';
-    };
-
-    const handleUrlClick = (e: React.MouseEvent, url: string) => {
-        e.preventDefault();
-        e.stopPropagation();
-        window.open(url, '_blank', 'noopener,noreferrer');
-    };
-
-    return (
-        <Popover >
-            <PopoverTrigger asChild >
-                <span className="text-[10px] font-bold bg-slate-500 hover:bg-slate-600 text-white rounded-full w-4 h-4 inline-flex items-center justify-center align-super cursor-pointer transition-colors">
-                    {index + 1}
-                </span>
-            </PopoverTrigger>
-            <PopoverContent className="w-80 p-4 space-y-3 relative" align="start" >
-                {/* External Link Button - Top Right */}
-                {node?.url && (
-                    <button
-                        onClick={(e) => handleUrlClick(e, node.url)}
-                        className="absolute top-3 right-3 inline-flex items-center justify-center w-6 h-6 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded transition-colors"
-                        title="Open in new tab"
-                    >
-                        <ExternalLink size={14} />
-                    </button>
-                )}
-                
-                {/* Heading */}
-                <div className="text-sm font-semibold text-slate-900 dark:text-slate-100 pr-8">
-                    {node?.metadata?.group_name || 'Source'}
-                </div>
-                
-                {/* Source */}
-                <div className="text-xs text-slate-600 dark:text-slate-400 font-medium">
-                    {node?.metadata?.title || 'Untitled'}
-                </div>
-                
-                {/* Body */}
-                <div className="text-xs text-slate-700 dark:text-slate-300 leading-relaxed">
-                    {truncateText(node?.text || 'No content available')}
-                </div>
-            </PopoverContent>
-        </Popover>
-    );
-}
-  
 
 function ChatMessageDisplay({
     message,
@@ -99,12 +46,15 @@ function ChatMessageDisplay({
         >
             {message.role === "assistant" ? (
                 <div className="flex-1 flex flex-col space-y-4">
-                    <TerminalDisplay message={message} />
+                    <TerminalDisplay message={message} open={isLast} />
                     <ChatSourcesDisplay message={message} />
                     <ChatMessage.Content className="flex-1">
                         <ChatMessage.Content.Markdown citationComponent={CitationDisplay} />
                     </ChatMessage.Content>
-                    <ChatMessage.Actions className="flex-1 flex flex-row justify-end" />
+                    <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">

surfsense_web/components/chat_v2/ChatTerminal.tsx

@@ -3,8 +3,8 @@
 import React from "react";
 import { getAnnotationData, Message } from "@llamaindex/chat-ui";
 
-export default function TerminalDisplay({ message }: { message: Message }) {
+export default function TerminalDisplay({ message, open }: { message: Message, open: boolean }) {
-    const [isCollapsed, setIsCollapsed] = React.useState(true);
+    const [isCollapsed, setIsCollapsed] = React.useState(!open);
 
     // Get the last assistant message that's not being typed
     if (!message) {