converting conversation into messages object

demos/use_cases/chatgpt-preference-model-selector/src/App.js

@@ -6,8 +6,8 @@ export default function App() {
     <div className="bg-gray-100 min-h-screen flex items-center justify-center p-4">
       <div className="w-full max-w-6xl">
         <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold text-gray-800">ChatGPT Usage Preferences</h1>
-            <p className="text-gray-600 mt-2">Define your usage preferences for each type of ChatGPT model.</p>
+            <h1 className="text-3xl font-bold text-gray-800">ChatGPT Model Selector</h1>
+            <p className="text-gray-600 mt-2">Define usage preferences to optimize model selection.</p>
         </div>
         <PreferenceBasedModelSelector />
       </div>

demos/use_cases/chatgpt-preference-model-selector/src/scripts/content.js

@@ -28,14 +28,51 @@
   /**─────────────────────── 2️⃣ Handle proxied fetch from the page ───────────────────────**/
   window.addEventListener('message', ev => {
     console.log('[ModelSelector] page→content message', ev.data, ev.ports);
+
     if (ev.source !== window || ev.data?.type !== 'ARCHGW_FETCH') return;
-    const { url, init } = ev.data;
+
+    const { url, init, originalRequestUrl } = ev.data;
     const port = ev.ports[0];
 
     (async () => {
       try {
-        const res = await fetch(url, init);
-        const reader = res.body.getReader();
+        console.log('[ModelSelector] Fetching model recommendation from local proxy...');
+        //const res = await fetch(url, init);
+        //const json = await res.json();
+
+        //console.log('[ModelSelector] Proxy responded with:', json);
+
+        const targetModel = 'o4-mini-high';
+        if (!targetModel) {
+          console.warn('[ModelSelector] No model returned from proxy, using default fetch');
+          port.postMessage({ done: true });
+          return;
+        }
+
+        // ✅ Extract the original fetch request body from init.body
+        let originalBody = {};
+        try {
+          originalBody = JSON.parse(init.body);
+        } catch {
+          console.warn('[ModelSelector] Could not parse original fetch body');
+        }
+
+        // ✅ Patch the model in the request
+        originalBody.model = targetModel;
+
+        console.log(`[ModelSelector] Updating model in request → ${targetModel}`);
+
+        // ✅ Resume the request to the real backend
+        const upstreamRes = await fetch('/backend-api/conversation', {
+          method: init.method,
+          headers: init.headers,
+          credentials: init.credentials,
+          body: JSON.stringify(originalBody)
+        });
+
+        // ✅ Stream the upstream response back to the page
+        const reader = upstreamRes.body.getReader();
+
         while (true) {
           const { done, value } = await reader.read();
           if (done) {
@@ -46,12 +83,13 @@
           }
         }
       } catch (err) {
-        console.error(`${TAG} proxy fetch error`, err);
+        console.error('[ModelSelector] proxy fetch error', err);
         port.postMessage({ done: true });
       }
     })();
   });
 
+
   /**─────────────────────── 3️⃣ DOM patch for model selector label ───────────────────────**/
   let desiredModel = null;
   function patchDom() {

demos/use_cases/chatgpt-preference-model-selector/src/scripts/pageFetchOverride.js

@@ -4,6 +4,7 @@
   console.log(`${TAG} installing fetch override`);
 
   window.archgwSettings = window.archgwSettings || { preferences: [], defaultModel: null };
+
   window.addEventListener('message', ev => {
     if (ev.source === window && ev.data?.type === 'PBMS_SETTINGS') {
       window.archgwSettings = ev.data.settings;
@@ -11,6 +12,24 @@
     }
   });
 
+  // New function: scrape current messages from the DOM
+  function get_messages() {
+    const bubbles = [...document.querySelectorAll('[data-message-author-role]')];
+
+    const messages = bubbles
+      .map(b => {
+        const role = b.getAttribute('data-message-author-role'); // "user" | "assistant"
+        const content =
+          role === 'assistant'
+            ? (b.querySelector('.markdown')?.innerText ?? b.innerText ?? '').trim()
+            : (b.innerText ?? '').trim();
+        return content ? { role, content } : null;
+      })
+      .filter(Boolean);
+
+    return { messages };
+  }
+
   const origFetch = window.fetch;
   window.fetch = async function(input, init = {}) {
     const urlString = typeof input === 'string' ? input : input.url;
@@ -26,17 +45,24 @@
     if (pathname === '/backend-api/conversation') {
       console.log(`${TAG} matched conversation → proxy via content script`);
 
-      // patch metadata
       let body = {};
       try { body = JSON.parse(init.body); } catch {}
+
+      const currentMessages = get_messages();
+      console.log(`${TAG} scraped messages →`, currentMessages);
+
+      // Patch metadata with current preferences
       body.metadata = {
         archgw_preference_config: window.archgwSettings.preferences
           .map(p => `- name: ${p.name}\n  model: ${p.model}\n  usage: ${p.usage}`)
-          .join('\n')
+          .join('\n'),
+
+        // Add current messages dynamically
+        archgw_current_messages: JSON.stringify(currentMessages)
       };
+
       init.body = JSON.stringify(body);
 
-      // send only the serializable parts of `init`
       const safeInit = {
         method: init.method,
         headers: init.headers,
@@ -44,7 +70,6 @@
         credentials: init.credentials
       };
 
-      // set up MessageChannel
       const { port1, port2 } = new MessageChannel();
       window.postMessage({
         type: 'ARCHGW_FETCH',
@@ -52,7 +77,6 @@
         init: safeInit
       }, '*', [port2]);
 
-      // return streaming response
       return new Response(new ReadableStream({
         start(controller) {
           port1.onmessage = ({ data }) => {