Merge pull request #11 from evanmeeks/develop

Develop

Author: evanmeeks

src/components/LanguageMenu/LanguageMenu.tsx

@@ -4,6 +4,7 @@ import {
   TURN_PARENT,
   GROUPED_TURN_CONTAINER,
   ROLE_CONTAINER,
+  HAS_USER_PSUEUDO,
   USER_DATA_ATTR,
   CONV_EDIT_BUTTON_ARIA_LABEL,
   LANGUAGE_MENU_CONTAINER,
@@ -26,6 +27,12 @@ const LanguageMenu: React.FC<LanguageMenuProps> = React.memo(
     );
     const { settings, updateSettings } = useSettings();
     const attachedSelectorsRef = useRef<Set<string>>(new Set());
+    const isNewChatRef = useRef<boolean>(false);
+    const pendingTurnsRef = useRef<Element[]>([]);
+
+    const checkIfNewChat = useCallback(() => {
+      return window.location.href.includes('chatgpt.com/?model=');
+    }, []);
 
     const handleEditClick = useCallback(
       (turnElement: Element): void => {
@@ -55,12 +62,15 @@ const LanguageMenu: React.FC<LanguageMenuProps> = React.memo(
     );
 
     const createContainer = useCallback((turnElement: Element) => {
-      const container = document.createElement('div');
-      container.className = LANGUAGE_MENU_CONTAINER;
-
       // Find the group container for the turn
       const groupContainer = turnElement.closest(GROUPED_TURN_CONTAINER);
-      if (!groupContainer) return container;
+      if (!groupContainer) return null;
+
+      // Check if this is a user turn by checking for the user pseudo-class
+      if (!groupContainer.matches(HAS_USER_PSUEUDO)) return null;
+
+      const container = document.createElement('div');
+      container.className = LANGUAGE_MENU_CONTAINER;
 
       // Check if level label exists and insert before it
       const levelLabel = groupContainer.querySelector('.level-label');
@@ -132,53 +142,130 @@ const LanguageMenu: React.FC<LanguageMenuProps> = React.memo(
       [createContainer, renderLanguageSelector, attachButtonListener],
     );
 
+    const processPendingTurns = useCallback(() => {
+      console.log(
+        'Processing pending turns for language menu:',
+        pendingTurnsRef.current.length,
+      );
+
+      const turns = Array.from(
+        document.querySelectorAll(GROUPED_TURN_CONTAINER),
+      );
+
+      pendingTurnsRef.current = []; // Clear pending turns
+
+      // Sort and process turns
+      turns.sort((a, b) => {
+        const position = a.compareDocumentPosition(b);
+        return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+      });
+
+      turns.forEach((turn) => attachLanguageSelector(turn));
+      isNewChatRef.current = false;
+    }, [attachLanguageSelector]);
+
     const handleMutations = useCallback(
       (mutations: MutationRecord[]) => {
+        // Check for new chat condition
+        if (checkIfNewChat() && !isNewChatRef.current) {
+          isNewChatRef.current = true;
+          pendingTurnsRef.current = [];
+        }
+
         mutations.forEach((mutation) => {
+          // Check for completion signal
+          if (
+            isNewChatRef.current &&
+            mutation.type === 'childList' &&
+            mutation.target instanceof Element &&
+            mutation.target.matches('.sr-only') &&
+            mutation.removedNodes.length === 1 &&
+            mutation.addedNodes.length === 0
+          ) {
+            console.log(
+              'Chat completion detected in LanguageMenu - processing turns',
+            );
+            processPendingTurns();
+            return;
+          }
+
           if (mutation.type === 'childList') {
+            mutation.removedNodes.forEach((node) => {
+              if (node instanceof Element) {
+                const id =
+                  node.getAttribute('data-message-id') ||
+                  node
+                    .querySelector(ROLE_CONTAINER)
+                    ?.getAttribute('data-message-id');
+                if (id) {
+                  attachedSelectorsRef.current.delete(id);
+                  setRenderedElements((prev) => {
+                    const newSet = new Set(prev);
+                    newSet.delete(id);
+                    return newSet;
+                  });
+                }
+              }
+            });
+
             mutation.addedNodes.forEach((node) => {
               if (node.nodeType === Node.ELEMENT_NODE) {
-                const elementNode = node as Element;
-
-                // Check for turn parent or group container
-                if (
-                  elementNode.matches(TURN_PARENT) ||
-                  elementNode.matches(GROUPED_TURN_CONTAINER)
-                ) {
-                  attachLanguageSelector(elementNode);
+                const element = node as Element;
+
+                // Find conversation turns
+                const turns = element.matches(GROUPED_TURN_CONTAINER)
+                  ? [element]
+                  : Array.from(
+                      element.querySelectorAll(GROUPED_TURN_CONTAINER),
+                    );
+
+                if (isNewChatRef.current) {
+                  // Queue turns for later processing
+                  pendingTurnsRef.current.push(...turns);
+                  console.log('Queued turns for language menu:', turns.length);
                 } else {
-                  // Search for nested turn elements
-                  elementNode
-                    .querySelectorAll(
-                      `${TURN_PARENT}, ${GROUPED_TURN_CONTAINER}`,
-                    )
-                    .forEach(attachLanguageSelector);
+                  // Process turns immediately for existing chats
+                  turns.forEach((turn) => attachLanguageSelector(turn));
                 }
               }
             });
           }
         });
       },
-      [attachLanguageSelector],
+      [checkIfNewChat, processPendingTurns, attachLanguageSelector],
     );
 
     useEffect(() => {
+      // Check if we're starting with a new chat
+      isNewChatRef.current = checkIfNewChat();
+
       observerRef.current = new MutationObserver(handleMutations);
       observerRef.current.observe(document.body, {
         childList: true,
         subtree: true,
       });
 
-      // Initial scan for existing elements
-      document
-        .querySelectorAll(`${TURN_PARENT}, ${GROUPED_TURN_CONTAINER}`)
-        .forEach(attachLanguageSelector);
+      if (!isNewChatRef.current) {
+        // Process existing elements only for existing chats
+        const existingTurns = Array.from(
+          document.querySelectorAll(GROUPED_TURN_CONTAINER),
+        );
+
+        existingTurns.sort((a, b) => {
+          const position = a.compareDocumentPosition(b);
+          return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+        });
+
+        existingTurns.forEach((turn) => attachLanguageSelector(turn));
+      }
 
       return () => {
         observerRef.current?.disconnect();
         timerRef.current && clearInterval(timerRef.current);
+        pendingTurnsRef.current = [];
+        isNewChatRef.current = false;
       };
-    }, [handleMutations, attachLanguageSelector]);
+    }, [handleMutations, attachLanguageSelector, checkIfNewChat]);
 
     // Handle settings changes
     useEffect(() => {

src/components/LanguageMenu/index.css

@@ -179,7 +179,7 @@ div[wordsmith-editable] {
 
   flex-direction: column !important;
   min-height: 100vh;
-  margin-top: 22px;
+  margin-top: 39px;
 }
 
 .monaco-list-row {

src/components/PromptMenu/PromptMenu.tsx

@@ -45,7 +45,6 @@ const PromptMenu: React.FC = () => {
     if (checkInitialized()) {
       console.log('Cleaning up existing menu...');
       if (rootRef.current) {
-        rootRef.current.unmount();
         rootRef.current = null;
       }
       if (languageSelectorRef.current) {
@@ -142,7 +141,7 @@ const PromptMenu: React.FC = () => {
         promptContainer.classList.remove('prompt-container');
       }
       if (rootRef.current) {
-        rootRef.current.unmount();
+        rootRef.current = null;
       }
       if (languageSelectorRef.current) {
         languageSelectorRef.current.remove();

src/components/Style/BaseStyleSheet.tsx

@@ -26,6 +26,10 @@ export const BaseStyleSheet = () => {
                 max-width: 97%;
                 min-width: 97%;
               }
+              .mx-auto {
+                 max-width: 100%;
+                 min-width: 100%;
+               }
              `
               : ''
           }