chatbot test window fixing

backend/app/services/rag_service.py

@@ -302,7 +302,7 @@ class RAGService:
             raise APIException(
                 status_code=400, 
                 error_code="UNSUPPORTED_FILE_TYPE",
-                detail=f"Unsupported file type: {file_ext}. Supported: .pdf, .docx, .doc, .txt, .md"
+                detail=f"Unsupported file type: {file_ext}. Supported: .pdf, .docx, .doc, .txt, .md, .html, .json, .jsonl, .csv, .xlsx, .xls"
             )
         
         # Generate safe filename
@@ -473,7 +473,7 @@ class RAGService:
     
     def _is_supported_file_type(self, file_ext: str) -> bool:
         """Check if file type is supported"""
-        supported_types = {'.pdf', '.docx', '.doc', '.txt', '.md', '.html', '.json', '.csv', '.xlsx', '.xls'}
+        supported_types = {'.pdf', '.docx', '.doc', '.txt', '.md', '.html', '.json', '.jsonl', '.csv', '.xlsx', '.xls'}
         return file_ext.lower() in supported_types
     
     def _generate_safe_filename(self, filename: str) -> str:

backend/modules/rag/main.py

@@ -148,6 +148,7 @@ class RAGModule(BaseModule):
             'application/vnd.ms-excel': self._process_with_markitdown,
             'text/html': self._process_html,
             'application/json': self._process_json,
+            'application/x-ndjson': self._process_jsonl,  # JSONL support
             'text/markdown': self._process_markdown,
             'text/csv': self._process_csv
         }
@@ -227,6 +228,10 @@ class RAGModule(BaseModule):
         if mime_type:
             return mime_type
         
+        # Check for JSONL file extension
+        if filename.lower().endswith('.jsonl'):
+            return 'application/x-ndjson'
+        
         # Try to detect from content
         if content.startswith(b'%PDF'):
             return 'application/pdf'
@@ -247,6 +252,13 @@ class RAGModule(BaseModule):
         elif content.startswith(b'<html') or content.startswith(b'<!DOCTYPE'):
             return 'text/html'
         elif content.startswith(b'{') or content.startswith(b'['):
+            # Check if it's JSONL by looking for newline-delimited JSON
+            try:
+                lines = content.decode('utf-8', errors='ignore').split('\n')
+                if len(lines) > 1 and all(line.strip().startswith('{') for line in lines[:3] if line.strip()):
+                    return 'application/x-ndjson'
+            except:
+                pass
             return 'application/json'
         else:
             return 'text/plain'
@@ -876,6 +888,75 @@ class RAGModule(BaseModule):
             logger.error(f"Error processing CSV file: {e}")
             return ""
     
+    async def _process_jsonl(self, content: bytes, filename: str) -> str:
+        """Process JSONL files (newline-delimited JSON)
+        
+        Specifically optimized for helpjuice-export.jsonl format:
+        - Each line contains a JSON object with 'id' and 'payload'
+        - Payload contains 'question', 'language', and 'answer' fields
+        - Combines question and answer into searchable content
+        """
+        try:
+            jsonl_content = content.decode('utf-8', errors='replace')
+            lines = jsonl_content.strip().split('\n')
+            
+            processed_articles = []
+            
+            for line_num, line in enumerate(lines, 1):
+                if not line.strip():
+                    continue
+                
+                try:
+                    # Parse each JSON line
+                    data = json.loads(line)
+                    
+                    # Handle helpjuice export format
+                    if 'payload' in data:
+                        payload = data['payload']
+                        article_id = data.get('id', f'article_{line_num}')
+                        
+                        # Extract fields
+                        question = payload.get('question', '')
+                        answer = payload.get('answer', '')
+                        language = payload.get('language', 'EN')
+                        
+                        # Combine question and answer for better search
+                        if question or answer:
+                            # Format as Q&A for better context
+                            article_text = f"## {question}\n\n{answer}\n\n"
+                            
+                            # Add language tag if not English
+                            if language != 'EN':
+                                article_text = f"[{language}] {article_text}"
+                            
+                            # Add metadata separator
+                            article_text += f"---\nArticle ID: {article_id}\nLanguage: {language}\n\n"
+                            
+                            processed_articles.append(article_text)
+                    
+                    # Handle generic JSONL format
+                    else:
+                        # Convert the entire JSON object to readable text
+                        json_text = json.dumps(data, indent=2, ensure_ascii=False)
+                        processed_articles.append(json_text + "\n\n")
+                        
+                except json.JSONDecodeError as e:
+                    logger.warning(f"Error parsing JSONL line {line_num}: {e}")
+                    continue
+                except Exception as e:
+                    logger.warning(f"Error processing JSONL line {line_num}: {e}")
+                    continue
+            
+            # Combine all articles
+            combined_text = '\n'.join(processed_articles)
+            
+            logger.info(f"Successfully processed {len(processed_articles)} articles from JSONL file {filename}")
+            return combined_text
+            
+        except Exception as e:
+            logger.error(f"Error processing JSONL file {filename}: {e}")
+            return ""
+    
     def _generate_document_id(self, content: str, metadata: Dict[str, Any]) -> str:
         """Generate unique document ID"""
         content_hash = hashlib.sha256(content.encode()).hexdigest()[:16]

frontend/src/app/llm/page.tsx

@@ -100,7 +100,7 @@ function LLMPageContent() {
   const fetchData = async () => {
     try {
       setLoading(true)
-      const token = localStorage.getItem('token')
+      const token = await import('@/lib/token-manager').then(m => m.tokenManager.getAccessToken())
       if (!token) {
         throw new Error('No authentication token found')
       }

frontend/src/components/chatbot/ChatInterface.css

@@ -1,3 +1,76 @@
+/* Chat interface improvements */
+
+/* Ensure proper scrolling and expansion */
+.chat-interface-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Smooth scrolling for messages */
+[data-radix-scroll-area-viewport] {
+  scroll-behavior: smooth;
+}
+
+/* Better message container spacing */
+.chat-messages-container {
+  padding: 1rem;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+/* Improved message bubbles */
+.chat-message-user,
+.chat-message-assistant {
+  animation: fadeIn 0.3s ease-in;
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+/* Ensure text stays within bounds */
+.chat-message-user *,
+.chat-message-assistant * {
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  max-width: 100%;
+}
+
+/* Fix prose content overflow */
+.prose {
+  max-width: 100% !important;
+}
+
+.prose * {
+  word-wrap: break-word !important;
+  overflow-wrap: anywhere !important;
+  max-width: 100% !important;
+}
+
+/* Prevent code blocks from overflowing */
+.prose pre,
+.prose code {
+  max-width: 100% !important;
+  overflow-x: auto !important;
+  word-wrap: normal !important;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 /* Dark mode improvements for chat interface */
 .dark .chat-message-assistant {
   background-color: rgb(51 65 85); /* slate-700 */

frontend/src/components/chatbot/ChatInterface.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useRef, useEffect, useCallback, useMemo } from "react"
+import { useState, useRef, useEffect, useCallback, useMemo, memo } from "react"
 import "./ChatInterface.css"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
@@ -34,6 +34,55 @@ interface ChatInterfaceProps {
   onClose?: () => void
 }
 
+// Memoized markdown renderer to prevent re-render issues with Next.js HotReload
+const MessageMarkdown = memo(({ content }: { content: string }) => {
+  const markdownComponents = useMemo(() => ({
+    p: ({ children }: any) => <p className="mb-2 last:mb-0 break-words">{children}</p>,
+    h1: ({ children }: any) => <h1 className="text-lg font-bold mb-2 break-words">{children}</h1>,
+    h2: ({ children }: any) => <h2 className="text-base font-bold mb-2 break-words">{children}</h2>,
+    h3: ({ children }: any) => <h3 className="text-sm font-bold mb-2 break-words">{children}</h3>,
+    ul: ({ children }: any) => <ul className="list-disc pl-4 mb-2 break-words">{children}</ul>,
+    ol: ({ children }: any) => <ol className="list-decimal pl-4 mb-2 break-words">{children}</ol>,
+    li: ({ children }: any) => <li className="mb-1 break-words">{children}</li>,
+    code: ({ children, className }: any) => {
+      const isInline = !className;
+      return isInline ? (
+        <code className="bg-muted/50 text-foreground px-1.5 py-0.5 rounded text-xs font-mono border break-words">
+          {children}
+        </code>
+      ) : (
+        <code className={`block bg-muted/50 text-foreground p-3 rounded text-sm font-mono overflow-x-auto border w-full ${className || ''}`}>
+          {children}
+        </code>
+      )
+    },
+    pre: ({ children }: any) => (
+      <pre className="bg-muted/50 text-foreground p-3 rounded overflow-x-auto text-sm font-mono mb-2 border w-full whitespace-pre-wrap">
+        {children}
+      </pre>
+    ),
+    blockquote: ({ children }: any) => (
+      <blockquote className="border-l-4 border-muted-foreground/20 pl-4 italic mb-2 break-words">
+        {children}
+      </blockquote>
+    ),
+    strong: ({ children }: any) => <strong className="font-semibold break-words">{children}</strong>,
+    em: ({ children }: any) => <em className="italic break-words">{children}</em>,
+  }), [])
+
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      rehypePlugins={[rehypeHighlight]}
+      components={markdownComponents}
+    >
+      {content}
+    </ReactMarkdown>
+  )
+})
+
+MessageMarkdown.displayName = 'MessageMarkdown'
+
 export function ChatInterface({ chatbotId, chatbotName, onClose }: ChatInterfaceProps) {
   const [messages, setMessages] = useState<ChatMessage[]>([])
   const [input, setInput] = useState("")
@@ -136,8 +185,8 @@ export function ChatInterface({ chatbotId, chatbotName, onClose }: ChatInterface
   }, [])
 
   return (
-    <Card className="h-[600px] flex flex-col bg-background border-border">
-      <CardHeader className="pb-3 border-b border-border">
+    <Card className="h-full flex flex-col bg-background border-border">
+      <CardHeader className="pb-3 border-b border-border flex-shrink-0">
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-2">
             <MessageCircle className="h-5 w-5" />
@@ -152,15 +201,15 @@ export function ChatInterface({ chatbotId, chatbotName, onClose }: ChatInterface
         <Separator />
       </CardHeader>
 
-      <CardContent className="flex-1 flex flex-col p-0">
+      <CardContent className="flex-1 flex flex-col p-0 min-h-0 overflow-hidden">
         <ScrollArea 
           ref={scrollAreaRef} 
-          className="flex-1 px-4"
+          className="flex-1 px-4 h-full"
           aria-label="Chat conversation"
           role="log"
           aria-live="polite"
         >
-          <div className="space-y-4 py-4">
+          <div className="space-y-4 py-4 chat-messages-container">
             {messages.length === 0 && (
               <div className="text-center py-8">
                 <Bot className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
@@ -171,7 +220,7 @@ export function ChatInterface({ chatbotId, chatbotName, onClose }: ChatInterface
 
             {messages.map((message) => (
               <div key={message.id} className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}>
-                <div className={`max-w-[75%] min-w-0 space-y-2`}>
+                <div className={`max-w-[85%] min-w-0 space-y-2`}>
                   <div className={`flex items-start space-x-2 ${message.role === 'user' ? 'flex-row-reverse space-x-reverse' : ''}`}>
                     <div className={`p-2 rounded-full ${message.role === 'user' ? 'bg-primary' : 'bg-secondary/50 dark:bg-slate-700'}`}>
                       {message.role === 'user' ? (
@@ -183,53 +232,14 @@ export function ChatInterface({ chatbotId, chatbotName, onClose }: ChatInterface
                     <div className="flex-1 space-y-2 min-w-0">
                       <div className={`rounded-lg p-4 ${
                         message.role === 'user' 
-                          ? 'bg-primary text-primary-foreground ml-auto max-w-fit chat-message-user' 
+                          ? 'bg-primary text-primary-foreground ml-auto chat-message-user' 
                           : 'bg-muted text-foreground dark:bg-slate-700 dark:text-slate-200 chat-message-assistant'
-                      }`}>
-                        <div className="text-sm prose prose-sm dark:prose-invert max-w-full break-words overflow-hidden markdown-content dark:text-slate-200">
+                      } break-words overflow-wrap-anywhere`}>
+                        <div className="text-sm prose prose-sm dark:prose-invert max-w-none break-words overflow-wrap-anywhere markdown-content dark:text-slate-200">
                           {message.role === 'user' ? (
                             <div className="whitespace-pre-wrap break-words overflow-x-auto">{message.content}</div>
                           ) : (
-                            <ReactMarkdown
-                              className="dark:text-slate-100"
-                              remarkPlugins={[remarkGfm]}
-                              rehypePlugins={[rehypeHighlight]}
-                              components={{
-                                p: ({ children }) => <p className="mb-2 last:mb-0">{children}</p>,
-                                h1: ({ children }) => <h1 className="text-lg font-bold mb-2">{children}</h1>,
-                                h2: ({ children }) => <h2 className="text-base font-bold mb-2">{children}</h2>,
-                                h3: ({ children }) => <h3 className="text-sm font-bold mb-2">{children}</h3>,
-                                ul: ({ children }) => <ul className="list-disc pl-4 mb-2">{children}</ul>,
-                                ol: ({ children }) => <ol className="list-decimal pl-4 mb-2">{children}</ol>,
-                                li: ({ children }) => <li className="mb-1">{children}</li>,
-                                code: ({ children, className }) => {
-                                  const isInline = !className;
-                                  return isInline ? (
-                                    <code className="bg-muted/50 text-foreground px-1.5 py-0.5 rounded text-xs font-mono border break-all">
-                                      {children}
-                                    </code>
-                                  ) : (
-                                    <code className={`block bg-muted/50 text-foreground p-3 rounded text-sm font-mono overflow-x-auto border max-w-full ${className || ''}`}>
-                                      {children}
-                                    </code>
-                                  )
-                                },
-                                pre: ({ children }) => (
-                                  <pre className="bg-muted/50 text-foreground p-3 rounded overflow-x-auto text-sm font-mono mb-2 border max-w-full">
-                                    {children}
-                                  </pre>
-                                ),
-                                blockquote: ({ children }) => (
-                                  <blockquote className="border-l-4 border-muted-foreground/20 pl-4 italic mb-2">
-                                    {children}
-                                  </blockquote>
-                                ),
-                                strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
-                                em: ({ children }) => <em className="italic">{children}</em>,
-                              }}
-                            >
-                              {message.content}
-                            </ReactMarkdown>
+                            <MessageMarkdown content={message.content} />
                           )}
                         </div>
                       </div>
@@ -290,7 +300,7 @@ export function ChatInterface({ chatbotId, chatbotName, onClose }: ChatInterface
 
             {isLoading && (
               <div className="flex justify-start">
-                <div className="max-w-[80%]">
+                <div className="max-w-[85%]">
                   <div className="flex items-start space-x-2">
                     <div className="p-2 rounded-full bg-secondary/50 dark:bg-slate-700">
                       <Bot className="h-4 w-4 text-muted-foreground" />
@@ -308,7 +318,7 @@ export function ChatInterface({ chatbotId, chatbotName, onClose }: ChatInterface
           </div>
         </ScrollArea>
 
-        <div className="p-4 border-t">
+        <div className="p-4 border-t flex-shrink-0">
           <div className="flex space-x-2">
             <Input
               value={input}

frontend/src/components/chatbot/ChatbotManager.tsx

@@ -1180,7 +1180,7 @@ export function ChatbotManager() {
       {/* Chat Interface Modal */}
       {showChatInterface && testingChatbot && (
         <Dialog open={showChatInterface} onOpenChange={setShowChatInterface}>
-          <DialogContent className="max-w-4xl max-h-[90vh] p-0">
+          <DialogContent className="max-w-6xl w-[90vw] h-[85vh] p-0 flex flex-col">
             <DialogHeader className="sr-only">
               <DialogTitle>Chat with {testingChatbot.name}</DialogTitle>
               <DialogDescription>

frontend/src/components/ui/user-menu.tsx

@@ -57,11 +57,16 @@ export function UserMenu() {
     setIsChangingPassword(true)
 
     try {
+      const token = await import('@/lib/token-manager').then(m => m.tokenManager.getAccessToken())
+      if (!token) {
+        throw new Error('Authentication required')
+      }
+
       const response = await fetch('/api-internal/v1/auth/change-password', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization': `Bearer ${localStorage.getItem('token')}`
+          'Authorization': `Bearer ${token}`
         },
         body: JSON.stringify({
           current_password: passwordData.currentPassword,

nginx/nginx.conf

@@ -3,6 +3,16 @@ events {
 }
 
 http {
+    # File upload size limits
+    client_max_body_size 100M;
+    client_body_buffer_size 100M;
+    
+    # Timeouts for large file processing
+    proxy_connect_timeout 600;
+    proxy_send_timeout 600;
+    proxy_read_timeout 600;
+    send_timeout 600;
+    
     upstream backend {
         server enclava-backend:8000;
     }