diff --git a/www/app/Chat.tsx b/www/app/Chat.tsx
index 8cb7be5..6d5f2c0 100644
--- a/www/app/Chat.tsx
+++ b/www/app/Chat.tsx
@@ -21,6 +21,8 @@ import { type Message } from '@/utils/types';
 import { localStorageProvider } from '@/utils/swrCache';
 
 import useAutoScroll from '@/hooks/autoscroll';
+import MessageList from '@/components/MessageList';
+import { MessageListRef } from '@/components/MessageList';
 
 const Thoughts = dynamic(() => import('@/components/thoughts'), {
   ssr: false,
@@ -130,6 +132,7 @@ export default function Chat({
   const messageContainerRef = useRef<ElementRef<'section'>>(null);
   const [, scrollToBottom] = useAutoScroll(messageContainerRef);
 
+  const messageListRef = useRef<MessageListRef>(null);
   const firstChat = useMemo(() => {
     return !initialConversations?.length ||
       (initialConversations.length === 1 && !initialMessages?.length) ||
@@ -297,7 +300,7 @@ What\'s on your mind? Let\'s dive in. 🌱`,
       },
     ];
     await mutateMessages(newMessages, { revalidate: false });
-    scrollToBottom();
+    messageListRef.current?.scrollToBottom();
 
     await new Promise((resolve) => setTimeout(resolve, 1000));
 
@@ -394,20 +397,20 @@ What\'s on your mind? Let\'s dive in. 🌱`,
           { revalidate: false }
         );
 
-        scrollToBottom();
+        messageListRef.current?.scrollToBottom();
       }
 
       responseReader.releaseLock();
       responseReader = null;
 
       await mutateMessages();
-      scrollToBottom();
+      messageListRef.current?.scrollToBottom();
       setCanSend(true);
     } catch (error) {
       console.error('Chat error:', error);
       setCanSend(true);
       await mutateMessages();
-      scrollToBottom();
+      messageListRef.current?.scrollToBottom();
     } finally {
       // Cleanup
       if (thoughtReader) {
@@ -478,45 +481,18 @@ What\'s on your mind? Let\'s dive in. 🌱`,
           </section>
         )}
         <div className="flex flex-col flex-grow overflow-hidden bg-secondary">
-          <section
-            className="flex-grow overflow-y-auto px-4 lg:px-5 dark:text-white"
-            ref={messageContainerRef}
-          >
-            {messages ? (
-              [defaultMessage, ...messages].map((message, i) => (
-                <MessageBox
-                  key={message.id || i}
-                  isUser={message.isUser}
-                  userId={userId}
-                  message={message}
-                  loading={messagesLoading}
-                  conversationId={conversationId}
-                  setThought={setThought}
-                  isThoughtOpen={openThoughtMessageId === message.id}
-                  setIsThoughtsOpen={(isOpen) =>
-                    setIsThoughtsOpen(isOpen, message.id)
-                  }
-                  onReactionAdded={handleReactionAdded}
-                />
-              ))
-            ) : (
-              <MessageBox
-                isUser={false}
-                message={{
-                  content: '',
-                  id: '',
-                  isUser: false,
-                  metadata: { reaction: null },
-                }}
-                loading={true}
-                setThought={setThought}
-                setIsThoughtsOpen={setIsThoughtsOpen}
-                onReactionAdded={handleReactionAdded}
-                userId={userId}
-                conversationId={conversationId}
-              />
-            )}
-          </section>
+          <MessageList
+            ref={messageListRef}
+            messages={messages}
+            defaultMessage={defaultMessage}
+            userId={userId}
+            conversationId={conversationId}
+            messagesLoading={messagesLoading}
+            handleReactionAdded={handleReactionAdded}
+            setThoughtParent={setThought}
+            openThoughtMessageId={openThoughtMessageId}
+            setIsThoughtsOpen={setIsThoughtsOpen}
+          />
           <div className="p-3 pb-0 lg:p-5 lg:pb-0">
             <form
               id="send"
diff --git a/www/app/actions/messages.ts b/www/app/actions/messages.ts
index 991afb4..215ad48 100644
--- a/www/app/actions/messages.ts
+++ b/www/app/actions/messages.ts
@@ -58,18 +58,43 @@ export async function getThought(conversationId: string, messageId: string) {
       const honchoUser = await getHonchoUser(user.id);
 
       try {
-        const thoughts = await honcho.apps.users.sessions.metamessages.list(
-          honchoApp.id,
-          honchoUser.id,
-          conversationId,
-          {
-            message_id: messageId,
-            metamessage_type: 'thought',
-            filter: { type: 'assistant' },
-          }
-        );
-
-        return thoughts.items[0]?.content || null;
+        const [thoughts, dialectic] = await Promise.all([
+          honcho.apps.users.sessions.metamessages.list(
+            honchoApp.id,
+            honchoUser.id,
+            conversationId,
+            {
+              message_id: messageId,
+              metamessage_type: 'thought',
+              filter: { type: 'assistant' },
+            }
+          ),
+          honcho.apps.users.sessions.metamessages.list(
+            honchoApp.id,
+            honchoUser.id,
+            conversationId,
+            {
+              message_id: messageId,
+              metamessage_type: 'honcho',
+              filter: { type: 'assistant' },
+            }
+          )
+        ]);
+
+        const thoughtText = thoughts.items[0]?.content;
+        const dialecticText = dialectic.items[0]?.content;
+
+        if (!thoughtText) {
+          return null;
+        }
+
+        let completeThought = thoughtText;
+
+        if (dialecticText) {
+          completeThought += '\n\nDialectic Response:\n\n' + dialecticText;
+        }
+
+        return completeThought;
       } catch (error) {
         console.error('Error in getThought:', error);
         throw new Error('Internal server error');
diff --git a/www/components/MessageList.tsx b/www/components/MessageList.tsx
new file mode 100644
index 0000000..8dd7d87
--- /dev/null
+++ b/www/components/MessageList.tsx
@@ -0,0 +1,139 @@
+'use client';
+import { useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import { Message } from '@/utils/types';
+import MessageBox from '@/components/messagebox';
+import { getThought } from '@/app/actions/messages';
+import useAutoScroll from '@/hooks/autoscroll';
+
+interface MessageListProps {
+  messages: Message[] | undefined;
+  defaultMessage: Message;
+  userId: string;
+  conversationId?: string;
+  messagesLoading: boolean;
+  handleReactionAdded: (messageId: string, reaction: any) => Promise<void>;
+  setThoughtParent: (thought: string) => void;
+  setIsThoughtsOpen: (isOpen: boolean, messageId?: string | null | undefined) => void;
+  openThoughtMessageId: string | null;
+}
+
+export interface MessageListRef {
+  scrollToBottom: () => void;
+}
+
+const MessageList = forwardRef<MessageListRef, MessageListProps>(({
+  messages,
+  defaultMessage,
+  userId,
+  conversationId,
+  messagesLoading,
+  handleReactionAdded,
+  setThoughtParent,
+  setIsThoughtsOpen,
+  openThoughtMessageId,
+}, ref) => {
+  const [isThoughtLoading, setIsThoughtLoading] = useState<boolean>(false);
+  const [thoughtError, setThoughtError] = useState<{ messageId: string, error: string } | null>(null);
+
+  const messageContainerRef = useRef<HTMLElement>(null);
+  const [, scrollToBottom] = useAutoScroll(messageContainerRef);
+
+  // Expose scrollToBottom method to parent
+  useImperativeHandle(ref, () => ({
+    scrollToBottom: () => {
+      scrollToBottom();
+    },
+  }));
+
+  const handleGetThought = async (messageId: string) => {
+    if (!conversationId || !userId) return;
+
+    // Find the last user message before this AI message
+    const allMessages = [defaultMessage, ...(messages || [])];
+    const messageIndex = allMessages.findIndex(msg => msg.id === messageId);
+
+    // Look backwards for the last user message
+    let lastUserMessageId = null;
+    for (let i = messageIndex; i >= 0; i--) {
+      if (allMessages[i].isUser) {
+        lastUserMessageId = allMessages[i].id;
+        break;
+      }
+    }
+
+    try {
+      // Try with last user message first
+      if (lastUserMessageId) {
+        const thought = await getThought(conversationId, lastUserMessageId);
+        if (thought) {
+          setThoughtParent(thought);
+          setIsThoughtsOpen(true, messageId);
+          return;
+        }
+      }
+
+      // If that didn't work, try with current AI message
+      const thought = await getThought(conversationId, messageId);
+      if (thought) {
+        setThoughtParent(thought);
+        setIsThoughtsOpen(true, messageId);
+        return;
+      }
+
+      // If neither worked
+      setThoughtError({ messageId, error: 'No thought data available.' });
+      console.log(messageId, 'No thought data available.');
+    } catch (error) {
+      console.error('Failed to fetch thought:', error);
+      setThoughtError({ messageId, error: 'Failed to fetch thought.' });
+    } finally {
+      setIsThoughtLoading(false);
+    }
+  };
+
+  return (
+    <section
+      className="flex-grow overflow-y-auto px-4 lg:px-5 dark:text-white"
+      ref={messageContainerRef}
+    >
+      {messages ? (
+        [defaultMessage, ...messages].map((message, i) => (
+          <MessageBox
+            key={message.id || i}
+            isUser={message.isUser}
+            userId={userId}
+            message={message}
+            loading={messagesLoading}
+            conversationId={conversationId}
+            isThoughtOpen={openThoughtMessageId === message.id}
+            setIsThoughtsOpen={(isOpen) => setIsThoughtsOpen(isOpen, message.id)}
+            onReactionAdded={handleReactionAdded}
+            onGetThought={handleGetThought}
+            isThoughtLoading={isThoughtLoading && openThoughtMessageId === message.id}
+            thoughtError={thoughtError?.messageId === message.id ? thoughtError.error : null}
+          />
+        ))
+      ) : (
+        <MessageBox
+          isUser={false}
+          message={{
+            content: '',
+            id: '',
+            isUser: false,
+            metadata: { reaction: null },
+          }}
+          loading={true}
+          setIsThoughtsOpen={setIsThoughtsOpen}
+          onReactionAdded={handleReactionAdded}
+          onGetThought={handleGetThought}
+          userId={userId}
+          conversationId={conversationId}
+        />
+      )}
+    </section>
+  );
+});
+
+MessageList.displayName = 'MessageList';
+
+export default MessageList; 
diff --git a/www/components/messagebox.tsx b/www/components/messagebox.tsx
index e73257d..16671ad 100644
--- a/www/components/messagebox.tsx
+++ b/www/components/messagebox.tsx
@@ -8,12 +8,10 @@ import {
   FaLightbulb,
   FaThumbsDown,
   FaThumbsUp,
-  FaChevronDown,
-  FaChevronRight,
 } from 'react-icons/fa';
 import { type Message } from '@/utils/types';
 import Spinner from './spinner';
-import { getThought } from '@/app/actions/messages';
+// import { getThought } from '@/app/actions/messages';
 
 export type Reaction = 'thumbs_up' | 'thumbs_down' | null;
 
@@ -24,22 +22,24 @@ interface MessageBoxProps {
   message: Message;
   loading?: boolean;
   isThoughtOpen?: boolean;
-  setIsThoughtsOpen: (isOpen: boolean) => void;
-  setThought: (thought: string) => void;
+  isThoughtLoading?: boolean;
+  thoughtError?: string | null;
+  setIsThoughtsOpen: (isOpen: boolean, messageId?: string | null) => void;
   onReactionAdded: (messageId: string, reaction: Reaction) => Promise<void>;
+  onGetThought: (messageId: string) => Promise<void>;
 }
 
 export default function MessageBox({
   isUser,
   userId,
-  // URL,
   message,
   loading = false,
   isThoughtOpen,
   setIsThoughtsOpen,
   conversationId,
   onReactionAdded,
-  setThought,
+  onGetThought,
+  thoughtError,
 }: MessageBoxProps) {
   const [isThoughtLoading, setIsThoughtLoading] = useState(false);
   const [pendingReaction, setPendingReaction] = useState<Reaction>(null);
@@ -73,18 +73,12 @@ export default function MessageBox({
       setIsThoughtsOpen(false);
       return;
     }
+
     setIsThoughtLoading(true);
     setError(null);
 
     try {
-      const thought = await getThought(conversationId, messageId);
-
-      if (thought) {
-        setIsThoughtsOpen(true);
-        setThought(thought);
-      } else {
-        setError('No thought found.');
-      }
+      await onGetThought(messageId);
     } catch (err) {
       setError('Failed to fetch thought.');
       console.error(err);
@@ -117,54 +111,58 @@ export default function MessageBox({
       <div className="flex flex-col gap-2 w-full">
         {loading ? memoizedSkeleton : <MarkdownWrapper text={content} />}
         {!loading && !isUser && shouldShowButtons && (
-          <div className="flex justify-start gap-2 mt-2">
-            <button
-              className={`p-2 rounded-full ${
-                reaction === 'thumbs_up'
+          <div className="flex flex-col gap-2 mt-2">
+            <div className="flex justify-start gap-2">
+              <button
+                className={`p-2 rounded-full ${reaction === 'thumbs_up'
                   ? 'bg-blue-500 text-white'
-                  : 'bg-gray-200 dark:bg-gray-700'
-              } ${pendingReaction === 'thumbs_up' ? 'opacity-50' : ''}`}
-              onClick={() => handleReaction('thumbs_up')}
-              disabled={pendingReaction !== null}
-            >
-              <div className="w-5 h-5 flex items-center justify-center">
-                {pendingReaction === 'thumbs_up' ? (
-                  <Spinner size={16} />
-                ) : (
-                  <FaThumbsUp />
-                )}
-              </div>
-            </button>
-            <button
-              className={`p-2 rounded-full ${
-                reaction === 'thumbs_down'
+                  : 'bg-accent text-foreground'
+                  } ${pendingReaction === 'thumbs_up' ? 'opacity-50' : ''}`}
+                onClick={() => handleReaction('thumbs_up')}
+                disabled={pendingReaction !== null}
+              >
+                <div className="w-5 h-5 flex items-center justify-center">
+                  {pendingReaction === 'thumbs_up' ? (
+                    <Spinner size={16} />
+                  ) : (
+                    <FaThumbsUp />
+                  )}
+                </div>
+              </button>
+              <button
+                className={`p-2 rounded-full ${reaction === 'thumbs_down'
                   ? 'bg-red-500 text-white'
-                  : 'bg-gray-200 dark:bg-gray-700'
-              } ${pendingReaction === 'thumbs_down' ? 'opacity-50' : ''}`}
-              onClick={() => handleReaction('thumbs_down')}
-              disabled={pendingReaction !== null}
-            >
-              <div className="w-5 h-5 flex items-center justify-center">
-                {pendingReaction === 'thumbs_down' ? (
-                  <Spinner size={16} />
-                ) : (
-                  <FaThumbsDown />
-                )}
-              </div>
-            </button>
-            <button
-              className={`p-2 rounded-full ${
-                isThoughtOpen
+                  : 'bg-accent text-foreground'
+                  } ${pendingReaction === 'thumbs_down' ? 'opacity-50' : ''}`}
+                onClick={() => handleReaction('thumbs_down')}
+                disabled={pendingReaction !== null}
+              >
+                <div className="w-5 h-5 flex items-center justify-center">
+                  {pendingReaction === 'thumbs_down' ? (
+                    <Spinner size={16} />
+                  ) : (
+                    <FaThumbsDown />
+                  )}
+                </div>
+              </button>
+              <button
+                className={`p-2 rounded-full ${isThoughtOpen
                   ? 'bg-neon-green text-gray-800'
                   : 'bg-accent text-foreground'
-              }`}
-              onClick={handleFetchThought}
-              disabled={isThoughtLoading}
-            >
-              <div className="w-5 h-5 flex items-center justify-center">
-                {isThoughtLoading ? <Spinner size={16} /> : <FaLightbulb />}
+                  }`}
+                onClick={handleFetchThought}
+                disabled={isThoughtLoading}
+              >
+                <div className="w-5 h-5 flex items-center justify-center">
+                  {isThoughtLoading ? <Spinner size={16} /> : <FaLightbulb />}
+                </div>
+              </button>
+            </div>
+            {thoughtError && (
+              <div className="text-red-500 text-sm mt-1">
+                {thoughtError}
               </div>
-            </button>
+            )}
           </div>
         )}
         {error && <p className="text-red-500">Error: {error}</p>}