fix: search for actual prev/next visible message in chain (#124)

The previous fix only checked if the immediately adjacent message
was hidden. This caused gaps in chains when hidden messages (like
lesson inclusions) appeared between visible messages.

Now searches through the log to find the actual prev/next visible
message, properly connecting chains across hidden messages.

Author: ErikBjare

src/components/ChatMessage.tsx

@@ -11,17 +11,12 @@ import { customRenderer, type CustomRenderer } from '@/utils/markdownRenderer';
 
 interface Props {
   message$: Observable<Message | StreamingMessage>;
-  previousMessage$?: Observable<Message | undefined>;
-  nextMessage$?: Observable<Message | undefined>;
+  log$: Observable<(Message | StreamingMessage)[]>;
+  currentIndex: number;
   conversationId: string;
 }
 
-export const ChatMessage: FC<Props> = ({
-  message$,
-  previousMessage$,
-  nextMessage$,
-  conversationId,
-}) => {
+export const ChatMessage: FC<Props> = ({ message$, log$, currentIndex, conversationId }) => {
   const { connectionConfig } = useApi();
   const { settings } = useSettings();
 
@@ -208,7 +203,7 @@ export const ChatMessage: FC<Props> = ({
     );
   });
 
-  const chainType$ = useMessageChainType(message$, previousMessage$, nextMessage$);
+  const chainType$ = useMessageChainType(message$, log$, currentIndex);
   const messageClasses$ = useObservable(
     () => `
         ${

src/components/ConversationContent.tsx

@@ -185,16 +185,12 @@ export const ConversationContent: FC<Props> = ({ conversationId, isReadOnly }) =
               return <div key={`${index}-${message?.timestamp}`} />;
             }
 
-            // Get the previous and next messages for spacing context
-            const previousMessage$ = index > 0 ? conversation$.data.log[index - 1] : undefined;
-            const nextMessage$ = conversation$.data.log[index + 1];
-
             return (
               <ChatMessage
                 key={`${index}-${msg$.timestamp.get()}`}
                 message$={msg$}
-                previousMessage$={previousMessage$}
-                nextMessage$={nextMessage$}
+                log$={conversation$.data.log}
+                currentIndex={index}
                 conversationId={conversationId}
               />
             );

src/components/__tests__/ChatMessage.test.tsx

@@ -25,36 +25,61 @@ describe('ChatMessage', () => {
   };
 
   it('renders user message', () => {
-    const message$ = observable<Message>({
+    const message: Message = {
       role: 'user',
       content: 'Hello!',
       timestamp: new Date().toISOString(),
-    });
+    };
+    const message$ = observable<Message>(message);
+    const log$ = observable<Message[]>([message]);
 
-    renderWithProviders(<ChatMessage message$={message$} conversationId={testConversationId} />);
+    renderWithProviders(
+      <ChatMessage
+        message$={message$}
+        log$={log$}
+        currentIndex={0}
+        conversationId={testConversationId}
+      />
+    );
     expect(screen.getByText('Hello!')).toBeInTheDocument();
   });
 
   it('renders assistant message', () => {
-    const message$ = observable<Message>({
+    const message: Message = {
       role: 'assistant',
       content: 'Hi there!',
       timestamp: new Date().toISOString(),
-    });
+    };
+    const message$ = observable<Message>(message);
+    const log$ = observable<Message[]>([message]);
 
-    renderWithProviders(<ChatMessage message$={message$} conversationId={testConversationId} />);
+    renderWithProviders(
+      <ChatMessage
+        message$={message$}
+        log$={log$}
+        currentIndex={0}
+        conversationId={testConversationId}
+      />
+    );
     expect(screen.getByText('Hi there!')).toBeInTheDocument();
   });
 
   it('renders system message with monospace font', () => {
-    const message$ = observable<Message>({
+    const message: Message = {
       role: 'system',
       content: 'System message',
       timestamp: new Date().toISOString(),
-    });
+    };
+    const message$ = observable<Message>(message);
+    const log$ = observable<Message[]>([message]);
 
     const { container } = renderWithProviders(
-      <ChatMessage message$={message$} conversationId={testConversationId} />
+      <ChatMessage
+        message$={message$}
+        log$={log$}
+        currentIndex={0}
+        conversationId={testConversationId}
+      />
     );
     const messageElement = container.querySelector('.font-mono');
     expect(messageElement).toBeInTheDocument();

src/utils/messageUtils.ts

@@ -1,37 +1,48 @@
 import type { Message } from '@/types/conversation';
-import { type Observable } from '@legendapp/state';
+import type { Observable } from '@legendapp/state';
 import { useObservable } from '@legendapp/state/react';
 
 export const isNonUserMessage = (role?: string) => role === 'assistant' || role === 'system';
 
-// Helper to check if a message should be considered for chain calculations
-// Hidden messages are treated as non-existent for chain purposes
+// Helper to check if a message should be visible for chain calculations
 const isVisibleForChain = (message: Message | undefined): boolean => {
   if (!message) return false;
-  // Messages with hide=true should not affect chain calculations
   if (message.hide) return false;
   return true;
 };
 
+// Find the previous visible message in the log
+const findPrevVisibleMessage = (log: Message[], currentIndex: number): Message | undefined => {
+  for (let i = currentIndex - 1; i >= 0; i--) {
+    if (isVisibleForChain(log[i])) return log[i];
+  }
+  return undefined;
+};
+
+// Find the next visible message in the log
+const findNextVisibleMessage = (log: Message[], currentIndex: number): Message | undefined => {
+  for (let i = currentIndex + 1; i < log.length; i++) {
+    if (isVisibleForChain(log[i])) return log[i];
+  }
+  return undefined;
+};
+
 export const useMessageChainType = (
   message$: Observable<Message>,
-  previousMessage$: Observable<Message | undefined> | undefined,
-  nextMessage$: Observable<Message | undefined> | undefined
+  log$: Observable<Message[]>,
+  currentIndex: number
 ) => {
   const messageChainType$ = useObservable(() => {
     try {
       const message = message$.get();
       if (!message) return 'standalone';
 
-      const previousMessage = previousMessage$?.get();
-      const nextMessage = nextMessage$?.get();
-
-      // Treat hidden messages as non-existent for chain calculations
-      const prevVisible = isVisibleForChain(previousMessage);
-      const nextVisible = isVisibleForChain(nextMessage);
+      const log = log$.get() || [];
+      const prevVisibleMessage = findPrevVisibleMessage(log, currentIndex);
+      const nextVisibleMessage = findNextVisibleMessage(log, currentIndex);
 
-      const isChainStart = !prevVisible || previousMessage?.role === 'user';
-      const isChainEnd = !nextVisible || nextMessage?.role === 'user';
+      const isChainStart = !prevVisibleMessage || prevVisibleMessage.role === 'user';
+      const isChainEnd = !nextVisibleMessage || nextVisibleMessage.role === 'user';
       const isPartOfChain = isNonUserMessage(message.role);
 
       if (!isPartOfChain) return 'standalone';
@@ -43,6 +54,6 @@ export const useMessageChainType = (
       console.warn('Error calculating message chain type:', error);
       return 'standalone';
     }
-  }, [message$, previousMessage$, nextMessage$]);
+  }, [message$, log$, currentIndex]);
   return messageChainType$;
 };