Refactor AI provider handling and enhance popup functionality

- Removed the ChatPanel component as it is no longer needed.
- Updated SummaryButton to improve error handling for API key and provider selection.
- Enhanced SettingsPanel to support custom base URLs and model selection for local providers.
- Implemented streaming request handling in background script for better performance.
- Updated manifest to include localhost permissions for local development.
- Added new styles for input fields in the settings panel.
- Improved model fetching logic for various AI providers, including Google AI.
- Adjusted Popup component to accommodate new settings functionality.

Author: avarayr

build.ts

@@ -37,8 +37,6 @@ export async function copyStaticFiles() {
 
   // Copy static files
   await copyFile("src/static/styles/styles.css", "public/content/styles.css");
-  await copyFile("src/static/popup/index.html", "public/popup/index.html");
-  await copyFile("src/static/popup/popup.js", "public/popup/popup.js");
   await copyFile("src/static/manifest/manifest.json", "public/manifest.json");
 }
 
@@ -67,6 +65,16 @@ async function buildExtension() {
       },
     });
 
+    // Build popup
+    await build({
+      entrypoints: ["./src/popup/index.tsx"],
+      outdir: "./public/popup",
+      minify: !isDev,
+      define: {
+        "import.meta.env.DEV": JSON.stringify(isDev),
+      },
+    });
+
     // Copy static files
     await copyStaticFiles();
 

src/background/index.ts

@@ -3,12 +3,104 @@ chrome.runtime.onInstalled.addListener(() => {
   console.log("YouTube Summary Extension installed");
 });
 
-// Listen for messages from content script
+// Handle regular (non-streaming) messages
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   if (request.type === "GET_SETTINGS") {
     chrome.storage.sync.get(["apiKey", "selectedProvider"], (result) => {
       sendResponse(result);
     });
     return true; // Will respond asynchronously
   }
+
+  if (request.type === "PROXY_REQUEST") {
+    const { url, options } = request;
+    console.log("Proxying request to:", url);
+
+    // Check if this is a streaming request
+    const isStreaming =
+      options?.body && JSON.parse(options.body).stream === true;
+
+    if (isStreaming) {
+      // For streaming requests, tell the content script to open a port
+      sendResponse({ type: "USE_PORT" });
+      return true;
+    }
+
+    // Handle regular (non-streaming) requests
+    fetch(url, options)
+      .then(async (response) => {
+        const data = await response.json();
+        sendResponse({ ok: response.ok, data });
+      })
+      .catch((error) => {
+        console.error("Proxy request failed:", error);
+        sendResponse({ ok: false, error: error.message });
+      });
+
+    return true; // Will respond asynchronously
+  }
+});
+
+// Handle streaming connections
+chrome.runtime.onConnect.addListener((port) => {
+  if (port.name === "proxy-stream") {
+    port.onMessage.addListener(async (request) => {
+      const { url, options } = request;
+
+      try {
+        const response = await fetch(url, options);
+        if (!response.ok) {
+          // For streaming responses, don't try to parse JSON on error
+          port.postMessage({
+            error: `Request failed with status ${response.status}`,
+          });
+          port.disconnect();
+          return;
+        }
+
+        const reader = response.body?.getReader();
+        if (!reader) {
+          port.postMessage({ error: "No response body" });
+          port.disconnect();
+          return;
+        }
+
+        // Stream the response chunks
+        while (true) {
+          const { value, done } = await reader.read();
+          if (done) break;
+
+          const chunk = new TextDecoder().decode(value);
+          const lines = chunk
+            .split("\n")
+            .filter(
+              (line) => line.trim() !== "" && line.trim() !== "data: [DONE]"
+            );
+
+          for (const line of lines) {
+            try {
+              const trimmedLine = line.replace(/^data: /, "").trim();
+              if (!trimmedLine) continue;
+
+              const parsed = JSON.parse(trimmedLine);
+              if (parsed.choices?.[0]?.delta?.content) {
+                port.postMessage({ chunk: parsed.choices[0].delta.content });
+              }
+            } catch (e) {
+              console.warn("Failed to parse streaming response line:", e);
+            }
+          }
+        }
+
+        // Signal stream completion
+        port.postMessage({ done: true });
+        port.disconnect();
+      } catch (error: any) {
+        // Type assertion for error
+        console.error("Streaming request failed:", error);
+        port.postMessage({ error: error?.message || "Unknown error occurred" });
+        port.disconnect();
+      }
+    });
+  }
 });

src/content/components/ChatPanel.tsx

@@ -97,16 +97,18 @@ export const SummaryButton: React.FC = () => {
         throw new Error("Could not extract subtitles from this video");
       }
 
-      if (!selectedProvider || !apiKey) {
-        throw new Error(
-          "Please configure your API key and provider in settings"
-        );
+      if (!selectedProvider) {
+        throw new Error("Please select an AI provider in settings");
+      }
+
+      if (!selectedProvider.isLocal && !apiKey) {
+        throw new Error("Please configure your API key in settings");
       }
 
       const providerWithModel = {
         ...selectedProvider,
         model: selectedModel || selectedProvider.model,
-        apiKey,
+        apiKey: apiKey || "",
       };
 
       for await (const token of generateSummary(subtitles, providerWithModel)) {
@@ -159,10 +161,14 @@ export const SummaryButton: React.FC = () => {
       <div className="button-container">
         <button
           onClick={handleSummarize}
-          disabled={isLoading || !selectedProvider || !apiKey}
+          disabled={
+            isLoading ||
+            !selectedProvider ||
+            (!selectedProvider.isLocal && !apiKey)
+          }
           className="summarize-button"
         >
-          {isLoading ? "Summarizing..." : "Summarize Video"}
+          {isLoading ? "Summarizing..." : "Summarize"}
         </button>
         <button
           onClick={() => setShowSettings(true)}