Refactor chat UI layout (#19)

* feat: add advisor carousel, avatar images in messages, visual improvements

Add AdvisorCarousel for welcome state, inline avatar display in MessageBubble, LemonSliceAvatar component, AgentStatusDropdown, and wider floating input area with sidebar-aware positioning.

Made-with: Cursor

* Resolve default value bug in `AdvisorCarousel.js`

* Remove unused `AgentDrobdownStatus.js`

* Remove unrelated `LemonSliceAvatar.js`

* Remove LemonSlice references

* Implement Cursor fix to carousel UI

* Add check to resolve error observed in test deployment

* Replace `all` with `and` checks per review

---------

Co-authored-by: NeonClary <askclary@gmail.com>

multi_llm_chatbot_backend/app/api/routes/chat.py

@@ -195,11 +195,11 @@ async def chat_sequential_enhanced(
         logger.info(f"Session {session_id} has {rag_stats.get('total_documents', 0)} documents available")
         
         # Warn if a repeated input message is received
-        if all((
-            session.messages,
-            session.messages[-1].get('role') == 'user',
+        if (
+            session.messages and
+            session.messages[-1].get('role') == 'user' and
             session.messages[-1].get('content') == message.user_input
-            )):
+            ):
             # TODO: This should be handled in the front-end input
             logger.warning(f"Repeated user input: {message.user_input}")
         session.append_message("user", message.user_input)

phd-advisor-frontend/src/components/AdvisorCarousel.js

@@ -0,0 +1,119 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import MessageBubble from './MessageBubble';
+
+const CAROUSEL_BREAKPOINT = 700;
+
+const AdvisorCarousel = ({ messages = [], onReply, onExpand, onClick, onSearchReferences, userAvatarId, userAvatarOptions }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isCarouselMode, setIsCarouselMode] = useState(false);
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const observer = new ResizeObserver(entries => {
+      const width = entries[0].contentRect.width;
+      setIsCarouselMode(width < CAROUSEL_BREAKPOINT);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [messages.length]);
+
+  const goPrev = useCallback(() => {
+    setActiveIndex(i => Math.max(0, i - 1));
+  }, []);
+
+  const goNext = useCallback(() => {
+    setActiveIndex(i => Math.min(messages.length - 1, i + 1));
+  }, [messages.length]);
+
+  if (messages.length === 1) {
+    return (
+      <div className="single-response-wide">
+        <MessageBubble
+          message={messages[0]}
+          onReply={onReply}
+          onExpand={onExpand}
+          onClick={onClick}
+          onSearchReferences={onSearchReferences}
+          showReplyButton={true}
+          userAvatarId={userAvatarId}
+          userAvatarOptions={userAvatarOptions}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`advisor-carousel ${isCarouselMode ? 'carousel-mode' : 'grid-mode'}`}
+      ref={containerRef}
+    >
+      {isCarouselMode && (
+        <button
+          className="carousel-arrow carousel-prev"
+          onClick={goPrev}
+          disabled={activeIndex === 0}
+          aria-label="Previous advisor"
+        >
+          <ChevronLeft size={20} />
+        </button>
+      )}
+
+      <div className="carousel-viewport">
+        <div
+          className="carousel-track"
+          style={isCarouselMode ? { width: `${messages.length * 100}%`, transform: `translateX(-${activeIndex * (100 / messages.length)}%)` } : undefined}
+        >
+          {messages.map(message => (
+            <div key={message.id} className="carousel-slide" style={isCarouselMode ? { width: `${100 / messages.length}%` } : undefined}>
+              <MessageBubble
+                message={message}
+                onReply={onReply}
+                onExpand={onExpand}
+                onClick={onClick}
+                onSearchReferences={onSearchReferences}
+                showReplyButton={true}
+                inlineAvatar={true}
+                userAvatarId={userAvatarId}
+                userAvatarOptions={userAvatarOptions}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {isCarouselMode && (
+        <>
+          <button
+            className="carousel-arrow carousel-next"
+            onClick={goNext}
+            disabled={activeIndex === messages.length - 1}
+            aria-label="Next advisor"
+          >
+            <ChevronRight size={20} />
+          </button>
+
+          <div className="carousel-dots">
+            {messages.map((m, i) => (
+              <button
+                key={m.id}
+                className={`carousel-dot ${i === activeIndex ? 'active' : ''}`}
+                onClick={() => setActiveIndex(i)}
+                aria-label={`Go to advisor ${i + 1}`}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default AdvisorCarousel;

phd-advisor-frontend/src/components/MessageBubble.js

@@ -1,23 +1,92 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Reply, Copy, Check, Maximize2, Info, FileText, Hash, Target } from 'lucide-react';
+import { Reply, Copy, Check, Maximize2, FileText, Hash, Target, Volume2, VolumeX, Search, X, Loader2 } from 'lucide-react';
+import * as LucideIcons from 'lucide-react';
 import { useAppConfig } from '../contexts/AppConfigContext';
 import { useTheme } from '../contexts/ThemeContext';
+import { useVoiceStatus } from '../contexts/VoiceStatusContext';
+
+const stripMarkdown = (md) => {
+  if (!md) return '';
+  return md
+    .replace(/```[\s\S]*?```/g, '')
+    .replace(/`([^`]+)`/g, '$1')
+    .replace(/#{1,6}\s?/g, '')
+    .replace(/[*_~]{1,3}([^*_~]+)[*_~]{1,3}/g, '$1')
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+    .replace(/!\[([^\]]*)\]\([^)]+\)/g, '$1')
+    .replace(/[-*+]\s/g, '')
+    .replace(/\n{2,}/g, '. ')
+    .replace(/\n/g, ' ')
+    .trim();
+};
 
 const MessageBubble = ({ 
   message, 
   onReply, 
   onCopy, 
   onExpand,
-  showReplyButton = false 
+  onSearchReferences,
+  showReplyButton = false,
+  inlineAvatar = false,
+  userAvatarId,
+  userAvatarOptions
 }) => {
   const { isDark } = useTheme();
-  const { advisors, getAdvisorColors } = useAppConfig();
+  const { allPersonas: advisors, getAllPersonaColors: getAdvisorColors } = useAppConfig();
+  const voiceStatus = useVoiceStatus();
   const [showTooltip, setShowTooltip] = useState(null);
   const [copiedStates, setCopiedStates] = useState({});
-  const [showInfoOverlay, setShowInfoOverlay] = useState(false);
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [isLoadingTTS, setIsLoadingTTS] = useState(false);
+  const [searchPopover, setSearchPopover] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchLoading, setSearchLoading] = useState(false);
+  const [promptCopied, setPromptCopied] = useState(false);
   const overlayRef = useRef(null);
+  const tooltipTimer = useRef(null);
+  const audioRef = useRef(null);
+
+  const handleSpeak = useCallback(async (content) => {
+    if (isSpeaking || isLoadingTTS) {
+      if (audioRef.current) { audioRef.current.pause(); audioRef.current = null; }
+      setIsSpeaking(false);
+      setIsLoadingTTS(false);
+      return;
+    }
+    if (voiceStatus && !voiceStatus.ensureReady('tts')) return;
+
+    const text = (content || '').trim();
+    if (!text) return;
+    setIsLoadingTTS(true);
+    try {
+      const token = localStorage.getItem('authToken');
+      const resp = await fetch(`${process.env.REACT_APP_API_URL}/api/tts`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text }),
+      });
+      if (!resp.ok) throw new Error('TTS failed');
+      const blob = await resp.blob();
+      const url = URL.createObjectURL(blob);
+      const audio = new Audio(url);
+      audioRef.current = audio;
+      setIsLoadingTTS(false);
+      setIsSpeaking(true);
+      audio.onended = () => { setIsSpeaking(false); URL.revokeObjectURL(url); audioRef.current = null; };
+      audio.onerror = () => { setIsSpeaking(false); URL.revokeObjectURL(url); audioRef.current = null; };
+      audio.play();
+    } catch (e) {
+      console.error('TTS error:', e);
+      setIsLoadingTTS(false);
+      setIsSpeaking(false);
+    }
+  }, [isSpeaking, isLoadingTTS, voiceStatus]);
+
+  useEffect(() => {
+    return () => { if (audioRef.current) { audioRef.current.pause(); audioRef.current = null; } };
+  }, []);
 
   const handleCopy = async (messageId, content) => {
     try {
@@ -36,31 +105,39 @@ const MessageBubble = ({
     if (onExpand) onExpand(messageId, persona_id);
   };
 
-  const handleInfoToggle = () => {
-    setShowInfoOverlay(!showInfoOverlay);
+  const handleSearch = async () => {
+    setSearchPopover(true);
+    setSearchLoading(true);
+    const content = message?.compact_markdown || message?.content || '';
+    try {
+      const token = localStorage.getItem('authToken');
+      const resp = await fetch(`${process.env.REACT_APP_API_URL}/api/search-references`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify({ statement: content.substring(0, 500) }),
+      });
+      if (resp.ok) {
+        const data = await resp.json();
+        setSearchQuery(data.search_query || content.substring(0, 100));
+      } else {
+        setSearchQuery(content.substring(0, 100));
+      }
+    } catch {
+      setSearchQuery(content.substring(0, 100));
+    } finally {
+      setSearchLoading(false);
+    }
   };
 
   const showTooltipWithDelay = (tooltipType) => {
-    setTimeout(() => setShowTooltip(tooltipType), 500);
+    clearTimeout(tooltipTimer.current);
+    tooltipTimer.current = setTimeout(() => setShowTooltip(tooltipType), 500);
   };
 
-  const hideTooltip = () => setShowTooltip(null);
-
-  // Close overlay when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (overlayRef.current && !overlayRef.current.contains(event.target)) {
-        setShowInfoOverlay(false);
-      }
-    };
-
-    if (showInfoOverlay) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }
-  }, [showInfoOverlay]);
+  const hideTooltip = () => {
+    clearTimeout(tooltipTimer.current);
+    setShowTooltip(null);
+  };
 
   // Minimal, safe preprocessing (keep Markdown structure intact)
   const preprocessMarkdown = (content) => {
@@ -186,6 +263,11 @@ const MessageBubble = ({
 
   // USER MESSAGE
   if (message.type === 'user') {
+    const uAvatar = userAvatarOptions?.find(a => a.id === userAvatarId);
+    const UserIcon = uAvatar
+      ? (LucideIcons[uAvatar.icon] || LucideIcons.User)
+      : null;
+
     return (
       <div className="user-message-container">
         <div className="user-message">
@@ -197,6 +279,15 @@ const MessageBubble = ({
           )}
           <p>{message.content}</p>
         </div>
+        {UserIcon && (
+          <div style={{
+            width: 32, height: 32, borderRadius: '50%', flexShrink: 0, marginLeft: 8,
+            backgroundColor: uAvatar.bg, color: uAvatar.color,
+            display: 'flex', alignItems: 'center', justifyContent: 'center'
+          }}>
+            <UserIcon size={16} />
+          </div>
+        )}
       </div>
     );
   }
@@ -216,14 +307,44 @@ const MessageBubble = ({
     const colors = getAdvisorColors(personaId, isDark);
     const isCopied = copiedStates[message.id];
 
-    return (
-      <div className="advisor-message-container">
-        <div 
-          className="advisor-avatar" 
-          style={{ backgroundColor: colors.bgColor || 'var(--bg-muted)' }}
+    const avatarElement = (size = 40) => (
+      advisor.avatarUrl ? (
+        <img 
+          src={advisor.avatarUrl} 
+          alt={advisor.name || 'Advisor'} 
+          style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} 
+        />
+      ) : Icon ? (
+        <div
+          style={{
+            width: size, height: size, borderRadius: '50%', backgroundColor: colors.bgColor || 'var(--bg-muted)',
+            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, overflow: 'hidden'
+          }}
         >
-          {Icon ? <Icon style={{ color: colors.color || 'var(--text-secondary)' }} /> : (advisor.name ? advisor.name.charAt(0) : 'A')}
+          <Icon style={{ color: colors.color || 'var(--text-secondary)', width: size * 0.5, height: size * 0.5 }} />
         </div>
+      ) : (
+        <div
+          style={{
+            width: size, height: size, borderRadius: '50%', backgroundColor: colors.bgColor || 'var(--bg-muted)',
+            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+            color: colors.color || 'var(--text-secondary)', fontWeight: 600, fontSize: size * 0.4
+          }}
+        >
+          {advisor.name ? advisor.name.charAt(0) : 'A'}
+        </div>
+      )
+    );
+
+    return (
+      <div className={`advisor-message-container ${inlineAvatar ? 'inline-avatar-mode' : ''}`}>
+        {!inlineAvatar && (
+          <div 
+            className="advisor-avatar" 
+            style={{ backgroundColor: colors.bgColor || 'var(--bg-muted)', overflow: 'hidden' }}
+          >
+          </div>
+        )}
 
         <div 
           className="advisor-message-bubble"
@@ -234,6 +355,7 @@ const MessageBubble = ({
           }}
         >
           <div className="advisor-message-header">
+            {inlineAvatar && avatarElement(32)}
             <h4 
               className="advisor-message-name" 
               style={{ color: colors.color || 'var(--text-primary)' }}
@@ -324,36 +446,93 @@ const MessageBubble = ({
                     <Maximize2 size={14} />
                   </button>
                   {showTooltip === 'expand' && (
-                    <div className="tooltip">Expand</div>
+                    <div className="tooltip">More</div>
+                  )}
+                </div>
+
+                <div className="tooltip-container">
+                  <button 
+                    className="message-action-button"
+                    onClick={() => handleSpeak(message?.compact_markdown || message?.content || '')}
+                    onMouseEnter={() => showTooltipWithDelay('speak')}
+                    onMouseLeave={hideTooltip}
+                    style={{ 
+                      color: isLoadingTTS ? (colors.color || 'var(--text-secondary)') : isSpeaking ? '#EF4444' : (colors.color || 'var(--text-secondary)'),
+                      borderColor: isSpeaking ? '#EF444440' : (colors.color ? colors.color + '40' : 'var(--border-muted)'),
+                      opacity: isLoadingTTS ? 0.7 : 1,
+                    }}
+                  >
+                    {isLoadingTTS ? <Loader2 size={14} style={{ animation: 'spin 1s linear infinite' }} /> : isSpeaking ? <VolumeX size={14} /> : <Volume2 size={14} />}
+                  </button>
+                  {showTooltip === 'speak' && (
+                    <div className="tooltip">{isLoadingTTS ? 'Loading audio...' : isSpeaking ? 'Stop speaking' : 'Speak it'}</div>
                   )}
                 </div>
 
                 <div className="tooltip-container">
                   <button 
                     className="message-action-button"
-                    onClick={handleInfoToggle}
-                    onMouseEnter={() => showTooltipWithDelay('info')}
+                    onClick={handleSearch}
+                    onMouseEnter={() => showTooltipWithDelay('search')}
                     onMouseLeave={hideTooltip}
                     style={{ 
                       color: colors.color || 'var(--text-secondary)',
                       borderColor: (colors.color ? colors.color + '40' : 'var(--border-muted)')
                     }}
                   >
-                    <Info size={14} />
+                    <Search size={14} />
                   </button>
-                  {showTooltip === 'info' && (
-                    <div className="tooltip">Info</div>
+                  {showTooltip === 'search' && (
+                    <div className="tooltip">Search for references</div>
                   )}
                 </div>
+
               </div>
             </div>
           )}
 
-          {showInfoOverlay && (
-            <RagInfoOverlay 
-              ragMetadata={message.ragMetadata} 
-              colors={colors}
-            />
+          {searchPopover && (
+            <div style={{
+              marginTop: 8, background: 'var(--bg-primary)',
+              border: '1px solid var(--border-primary)', borderRadius: 12,
+              padding: 14, boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
+            }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
+                <span style={{ fontWeight: 600, fontSize: 13, color: 'var(--text-primary)' }}>Search for References</span>
+                <button onClick={() => setSearchPopover(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-secondary)' }}>
+                  <X size={14} />
+                </button>
+              </div>
+              {searchLoading ? (
+                <div style={{ color: 'var(--text-secondary)', fontSize: 12 }}>Generating search query...</div>
+              ) : (
+                <>
+                  <div style={{
+                    background: 'var(--bg-secondary)', borderRadius: 8, padding: '8px 10px',
+                    fontSize: 12, color: 'var(--text-primary)', marginBottom: 8, lineHeight: 1.4,
+                  }}>{searchQuery}</div>
+                  <div style={{ display: 'flex', gap: 6 }}>
+                    <button onClick={() => window.open(`https://www.perplexity.ai/?q=${encodeURIComponent(searchQuery)}`, '_blank')} style={{
+                      padding: '6px 12px', borderRadius: 8, fontSize: 11, fontWeight: 600,
+                      background: 'var(--accent-primary)', color: '#fff', border: 'none', cursor: 'pointer',
+                    }}>Open in Perplexity</button>
+                    <button onClick={() => {
+                      navigator.clipboard.writeText(searchQuery).then(() => {
+                        setPromptCopied(true);
+                        setTimeout(() => setPromptCopied(false), 2000);
+                      }).catch(() => {});
+                    }} style={{
+                      padding: '6px 12px', borderRadius: 8, fontSize: 11, fontWeight: 600,
+                      background: promptCopied ? '#10B98120' : 'var(--bg-secondary)',
+                      color: promptCopied ? '#10B981' : 'var(--text-primary)',
+                      border: `1px solid ${promptCopied ? '#10B98140' : 'var(--border-primary)'}`,
+                      cursor: 'pointer',
+                      transition: 'all 0.2s ease',
+                    }}>{promptCopied ? '✓ Copied!' : 'Copy Prompt'}</button>
+                  </div>
+                </>
+              )}
+            </div>
           )}
         </div>
       </div>

phd-advisor-frontend/src/contexts/AppConfigContext.js

@@ -99,11 +99,15 @@ export const AppConfigProvider = ({ children }) => {
   }, [config]);
 
   const getAdvisorColors = buildGetAdvisorColors(advisors);
+  const allPersonas = advisors;
+  const getAllPersonaColors = getAdvisorColors;
 
   const value = {
-    config,          // raw config object from /api/config
-    advisors,        // { methodologist: { name, role, icon, color, ... }, ... }
+    config,
+    advisors,
+    allPersonas,
     getAdvisorColors,
+    getAllPersonaColors,
     resolveIcon,
     loading,
     error,

phd-advisor-frontend/src/contexts/VoiceStatusContext.js

@@ -0,0 +1,13 @@
+import React, { createContext, useContext } from 'react';
+
+const VoiceStatusContext = createContext(null);
+
+export const useVoiceStatus = () => useContext(VoiceStatusContext);
+
+export const VoiceStatusProvider = ({ children }) => (
+  <VoiceStatusContext.Provider value={null}>
+    {children}
+  </VoiceStatusContext.Provider>
+);
+
+export default VoiceStatusContext;

phd-advisor-frontend/src/pages/ChatPage.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { Home, MessageCircle, Reply, X, Sparkles, Users, Settings2, FileText , LogOut, Menu} from 'lucide-react';
 import EnhancedChatInput from '../components/EnhancedChatInput';
 import MessageBubble from '../components/MessageBubble';
@@ -13,6 +13,7 @@ import { useTheme } from '../contexts/ThemeContext';
 import '../styles/ChatPage.css';
 import '../styles/EnhancedChatInput.css';
 import AdvisorStatusDropdown from '../components/AdvisorStatusDropdown';
+import AdvisorCarousel from '../components/AdvisorCarousel';
 
 const ChatPage = ({ user, authToken, onNavigateToHome, onNavigateToCanvas, onSignOut }) => {
   const { config, advisors, getAdvisorColors } = useAppConfig();
@@ -661,6 +662,26 @@ const handleNewChat = async (sessionId = null) => {
     }
   };
 
+  /** Group consecutive advisor messages so we can render them in a horizontal carousel */
+  const messageGroups = useMemo(() => {
+    const groups = [];
+    let i = 0;
+    while (i < messages.length) {
+      if (messages[i].type === 'advisor') {
+        const advisorGroup = [];
+        while (i < messages.length && messages[i].type === 'advisor') {
+          advisorGroup.push(messages[i]);
+          i++;
+        }
+        groups.push({ type: 'advisor_group', messages: advisorGroup });
+      } else {
+        groups.push({ type: 'single', message: messages[i] });
+        i++;
+      }
+    }
+    return groups;
+  }, [messages]);
+
   const handleInputSubmit = async (inputMessage) => {
   if (replyingTo) {
     // This is a reply to a specific message
@@ -776,6 +797,7 @@ const handleNewChat = async (sessionId = null) => {
           <div className="chat-content">
             {!hasMessages ? (
               <div className="welcome-state">
+                <AdvisorCarousel />
                 <SuggestionsPanel onSuggestionClick={handleSendMessage} />
               </div>
             ) : (
@@ -790,71 +812,70 @@ const handleNewChat = async (sessionId = null) => {
                 
                 <div className="messages-list">
                   <div className="messages-scroll">
-                    {messages.map((message) => (
-                      <div key={message.id}>
-                        {message.type === 'user' && (
+                    {messageGroups.map((group) => (
+                      group.type === 'advisor_group' ? (
+                        <AdvisorCarousel
+                          key={group.messages.map(m => m.id).join('-')}
+                          messages={group.messages}
+                          onReply={handleReplyToMessage}
+                          onExpand={handleExpandMessage}
+                          onClick={handleMessageClick}
+                        />
+                      ) : (
+                      <div key={group.message.id}>
+                        {group.message.type === 'user' && (
                           <div className="user-message-container">
                             <div className="user-message">
-                              {message.replyTo && (
+                              {group.message.replyTo && (
                                 <div className="reply-indicator">
                                   <Reply size={12} />
-                                  <span>Reply to {message.replyTo.advisorName}</span>
+                                  <span>Reply to {group.message.replyTo.advisorName}</span>
                                 </div>
                               )}
-                              <p>{message.content}</p>
+                              <p>{group.message.content}</p>
                             </div>
                           </div>
                         )}
 
-                        {message.type === 'advisor' && (
-                          <MessageBubble
-                            message={message}
-                            onReply={handleReplyToMessage}
-                            onExpand={handleExpandMessage}
-                            onClick={handleMessageClick}
-                            showReplyButton={true}
-                          />
-                        )}
-
-                        {message.type === 'error' && (
+                        {group.message.type === 'error' && (
                           <div className="error-message-container">
                             <div className="error-message">
-                              <p>{message.content}</p>
+                              <p>{group.message.content}</p>
                             </div>
                           </div>
                         )}
 
-                        {message.type === 'system' && (
+                        {group.message.type === 'system' && (
                           <div className="system-message-container">
                             <div className="system-message">
-                              <p>{message.content}</p>
+                              <p>{group.message.content}</p>
                             </div>
                           </div>
                         )}
 
-                        {message.type === 'document_upload' && (
+                        {group.message.type === 'document_upload' && (
                           <div className="system-message-container">
                             <div className="system-message document-upload">
                               <FileText size={16} />
-                              <p>{message.content}</p>
+                              <p>{group.message.content}</p>
                             </div>
                           </div>
                         )}
 
-                        {message.type === 'clarification' && (
+                        {group.message.type === 'clarification' && (
                           <div className="clarification-message-container">
                             <div className="clarification-message">
                               <div className="clarification-header">
                                 <MessageCircle size={16} />
                                 <span>I need a bit more information</span>
                               </div>
-                              <p>{message.content}</p>
+                              <p>{group.message.content}</p>
                               
-                              {message.suggestions && message.suggestions.length > 0 && (
+                              {group.message.suggestions && group.message.suggestions.length > 0 && (
                                 <div className="clarification-suggestions">
                                   <p className="suggestions-label">Here are some ways you could be more specific:</p>
                                   <div className="suggestions-list">
-                                    {message.suggestions.map((suggestion, index) => (
+                                    {group.message.suggestions.map((suggestion, index) => (
                                       <button
                                         key={index}
                                         className="suggestion-button"
@@ -869,9 +890,8 @@ const handleNewChat = async (sessionId = null) => {
                             </div>
                           </div>
                         )}
-
-                        
                       </div>
+                      )
                     ))}
 
                     {thinkingAdvisors.includes('system') && (

phd-advisor-frontend/src/styles/ChatPage.css

@@ -221,6 +221,123 @@
   height: 100%;
 }
 
+/* Advisor carousel: horizontal layout for multiple advisor responses */
+.advisor-carousel {
+  display: flex;
+  align-items: stretch;
+  gap: 12px;
+  margin-bottom: 24px;
+  min-height: 0;
+  width: 100%;
+}
+
+.advisor-carousel .carousel-viewport {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.advisor-carousel .carousel-track {
+  display: flex;
+  height: 100%;
+  transition: transform 0.25s ease-out;
+}
+
+/* Grid mode: wide layout, all advisor cards side by side */
+.advisor-carousel.grid-mode .carousel-track {
+  transform: none;
+  gap: 16px;
+}
+
+.advisor-carousel.grid-mode .carousel-slide {
+  flex: 1 1 0;
+  min-width: 240px;
+  max-width: 400px;
+}
+
+/* Carousel mode: narrow layout, one card at a time with arrows */
+.advisor-carousel.carousel-mode {
+  position: relative;
+  padding: 0 40px;
+}
+
+.advisor-carousel.carousel-mode .carousel-track {
+  width: 100%;
+}
+
+.advisor-carousel.carousel-mode .carousel-slide {
+  width: 100%;
+  flex-shrink: 0;
+}
+
+.advisor-carousel .carousel-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+  flex-shrink: 0;
+  z-index: 2;
+}
+
+.advisor-carousel .carousel-arrow:hover:not(:disabled) {
+  background: var(--accent-primary);
+  color: white;
+  border-color: var(--accent-primary);
+}
+
+.advisor-carousel .carousel-arrow:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.advisor-carousel .carousel-prev {
+  left: 0;
+}
+
+.advisor-carousel .carousel-next {
+  right: 0;
+}
+
+.advisor-carousel .carousel-dots {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 12px;
+  flex-shrink: 0;
+}
+
+.advisor-carousel .carousel-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: none;
+  background: var(--border-primary);
+  cursor: pointer;
+  transition: background 0.2s;
+  padding: 0;
+}
+
+.advisor-carousel .carousel-dot.active,
+.advisor-carousel .carousel-dot:hover {
+  background: var(--accent-primary);
+}
+
+.single-response-wide {
+  margin-bottom: 24px;
+  width: 100%;
+  max-width: 512px;
+}
+
 
 [data-theme="dark"] .messages-scroll,
 [data-theme="dark"] .messages-container,
@@ -415,6 +532,21 @@
   margin-bottom: 24px;
 }
 
+.orchestrator-thinking .thinking-bubble {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-gradient, var(--accent-primary));
+  color: white;
+  border: none;
+  box-shadow: var(--shadow-sm);
+}
+
 .thinking-content {
   display: flex;
   align-items: center;
@@ -457,7 +589,7 @@
 .floating-input-area {
   position: fixed;
   bottom: 20px;
-  left: 0;
+  left: 300px;
   right: 0;
   z-index: 50;
   background: transparent;
@@ -465,8 +597,13 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  max-width: 800px;
+  max-width: 860px;
   margin: 0 auto;
+  transition: left 0.3s ease;
+}
+
+.floating-input-area.sidebar-collapsed {
+  left: 70px;
 }
 
 /* Reply Banner in ChatPage - matches input width and fixes dark mode */
@@ -1050,8 +1187,10 @@
     padding-bottom: 30px;
   }
   
-  .floating-input-area {
+  .floating-input-area,
+  .floating-input-area.sidebar-collapsed {
     bottom: 10px;
+    left: 0;
   }
   
   .floating-input-area .reply-banner {