refactor: extract domain filter UI into DomainFilter component

Author: PriscaAmajuoyi

frontend/nextjs/components/Task/DomainFilter.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Domain } from "@/types/data";
+
+interface DomainFilterProps {
+  domains: Domain[];
+  newDomain: string;
+  setNewDomain: React.Dispatch<React.SetStateAction<string>>;
+  onAddDomain: (e: React.FormEvent) => void;
+  onRemoveDomain: (domainToRemove: string) => void;
+}
+
+export default function DomainFilter({
+  domains,
+  newDomain,
+  setNewDomain,
+  onAddDomain,
+  onRemoveDomain,
+}: DomainFilterProps) {
+  return (
+    <div className="mt-4 domain_filters">
+      <div className="flex gap-2 mb-4">
+        <label htmlFor="domain_filters" className="agent_question">
+          Filter by domain{" "}
+        </label>
+        <input
+          type="text"
+          value={newDomain}
+          onChange={(e) => setNewDomain(e.target.value)}
+          placeholder="Filter by domain (e.g., techcrunch.com)"
+          className="input-static"
+          onKeyPress={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              onAddDomain(e);
+            }
+          }}
+        />
+        <button
+          type="button"
+          onClick={onAddDomain}
+          className="button-static"
+        >
+          Add Domain
+        </button>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {domains.map((domain, index) => (
+          <div key={index} className="domain-tag-static">
+            <span className="domain-text-static">{domain.value}</span>
+            <button
+              type="button"
+              onClick={() => onRemoveDomain(domain.value)}
+              className="domain-button-static"
+            >
+              X
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/nextjs/components/Task/ResearchForm.tsx

@@ -3,6 +3,7 @@ import FileUpload from "../Settings/FileUpload";
 import ToneSelector from "../Settings/ToneSelector";
 import MCPSelector from "../Settings/MCPSelector";
 import LayoutSelector from "../Settings/LayoutSelector";
+import DomainFilter from "./DomainFilter";
 import { useAnalytics } from "../../hooks/useAnalytics";
 import { ChatBoxSettings, Domain, MCPConfig } from '@/types/data';
 
@@ -164,51 +165,13 @@ export default function ResearchForm({
 
       {/** TODO: move the below to its own component */}
       {(chatBoxSettings.report_source === "web" || chatBoxSettings.report_source === "hybrid") && (
-        <div className="mt-4 domain_filters">
-          <div className="flex gap-2 mb-4">
-          <label htmlFor="domain_filters" className="agent_question">
-          Filter by domain{" "}
-        </label>
-            <input
-              type="text"
-              value={newDomain}
-              onChange={(e) => setNewDomain(e.target.value)}
-              placeholder="Filter by domain (e.g., techcrunch.com)"
-              className="input-static"
-              onKeyPress={(e) => {
-                if (e.key === 'Enter') {
-                  e.preventDefault();
-                  handleAddDomain(e);
-                }
-              }}
-            />
-            <button
-              type="button"
-              onClick={handleAddDomain}
-              className="button-static"
-            >
-              Add Domain
-            </button>
-          </div>
-
-          <div className="flex flex-wrap gap-2">
-            {domains.map((domain, index) => (
-              <div
-                key={index}
-                className="domain-tag-static"
-              >
-                <span className="domain-text-static">{domain.value}</span>
-                <button
-                  type="button"
-                  onClick={() => handleRemoveDomain(domain.value)}
-                  className="domain-button-static"
-                >
-                  X
-                </button>
-              </div>
-            ))}
-          </div>
-        </div>
+        <DomainFilter
+          domains={domains}
+          newDomain={newDomain}
+          setNewDomain={setNewDomain}
+          onAddDomain={handleAddDomain}
+          onRemoveDomain={handleRemoveDomain}
+        />
       )}
     </form>
   );