Updated the to use targeted jobs but its weird

2026-07-01 12:15:37 +02:00
parent 878627a6ba
commit e920d4925a
5 changed files with 434 additions and 134 deletions
@@ -1,7 +1,7 @@
 "use client"

-import { useState, useCallback, useRef, useEffect } from "react"
-import { AIChat } from "@/components/ai/ai-chat"
+import { useState, useCallback, useRef } from "react"
+import { AIChat, type AIChatHandle } from "@/components/ai/ai-chat"
 import { JobSelector } from "@/components/ai/job-selector"
 import { Bot, ChevronRight } from "lucide-react"

@@ -16,12 +16,50 @@ const tips = [
 export default function AIAssistantPage() {
  const [selectedJob, setSelectedJob] = useState<{ job_title: string; keywords: string[]; industry: string; description: string } | null>(null)
  const [recentPrompts, setRecentPrompts] = useState<string[]>([])
-  const aiChatRef = useRef<{ fillInput: (text: string) => void } | null>(null)
+  const [searching, setSearching] = useState(false)
+  const aiChatRef = useRef<AIChatHandle | null>(null)

  const handleJobSelect = useCallback((job: typeof selectedJob) => {
    setSelectedJob(job)
  }, [])

+  const handleSearch = useCallback(async (job: NonNullable<typeof selectedJob>) => {
+    setSearching(true)
+    const keyword = job.keywords[0]
+    aiChatRef.current?.addAssistantMessage(`🔍 Searching Facebook for **${job.job_title}** leads...`)
+
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), 360000)
+    const statusId = setTimeout(() => {
+      aiChatRef.current?.addAssistantMessage("⏳ Still searching Facebook (this can take up to 5 minutes)...")
+    }, 45000)
+
+    try {
+      const res = await fetch(`http://localhost:3008/scrape/facebook?force=true&query=${encodeURIComponent(keyword)}`, { method: "POST", signal: controller.signal })
+      clearTimeout(timeoutId)
+      clearTimeout(statusId)
+      const data = await res.json()
+      if (data.success && data.leads?.length > 0) {
+        const leadsText = data.leads.map((lead: any, i: number) =>
+          `**${i + 1}.** ${lead.author || "Unknown"}\n> ${(lead.content || "").slice(0, 300)}\n> 🔗 ${lead.url || "(no link available)"}`
+        ).join("\n\n")
+        aiChatRef.current?.addAssistantMessage(`✅ Found **${data.leads.length}** leads:\n\n${leadsText}`)
+      } else {
+        const reason = data.error || data.flag_reason || "No leads found this time"
+        aiChatRef.current?.addAssistantMessage(`⚠️ ${reason}`)
+      }
+    } catch (err: any) {
+      clearTimeout(timeoutId)
+      clearTimeout(statusId)
+      const msg = err.name === "AbortError"
+        ? "❌ Scraper timed out after 5 minutes. Try again or check the scraper service."
+        : `❌ ${err instanceof Error ? err.message : "Search failed"}`
+      aiChatRef.current?.addAssistantMessage(msg)
+    } finally {
+      setSearching(false)
+    }
+  }, [])
+
  const handleTipClick = useCallback((tip: string) => {
    aiChatRef.current?.fillInput(tip)
  }, [])
@@ -71,7 +109,7 @@ export default function AIAssistantPage() {
            <span className="w-1.5 h-1.5 rounded-full bg-[#f97316]" />
            <span className="text-[#f97316] text-[10px] font-bold uppercase tracking-[0.15em]">Target Job</span>
          </div>
-          <JobSelector onSelect={handleJobSelect} />
+          <JobSelector onSelect={handleJobSelect} onSearch={handleSearch} searching={searching} />
          {selectedJob && (
            <div className="bg-[#1a1d2e]/50 border border-[#ffffff08] rounded-xl p-3.5 mt-3 space-y-2">
              <h4 className="text-sm font-semibold text-[#e5e7eb]">{selectedJob.job_title}</h4>
@@ -57,7 +57,12 @@ const commandPills = [
  { icon: "✉️", label: "Templates", prompt: "Show me email templates" },
 ]

-export const AIChat = forwardRef<{ fillInput: (text: string) => void }, AIChatProps>(({ onMessageSent }, ref) => {
+export interface AIChatHandle {
+  fillInput: (text: string) => void
+  addAssistantMessage: (content: string) => void
+}
+
+export const AIChat = forwardRef<AIChatHandle, AIChatProps>(({ onMessageSent }, ref) => {
  const [messages, setMessages] = useState<ChatMessage[]>([])
  const [input, setInput] = useState("")
  const [loading, setLoading] = useState(false)
@@ -72,6 +77,17 @@ export const AIChat = forwardRef<{ fillInput: (text: string) => void }, AIChatPr
      setInput(text)
      setTimeout(() => textareaRef.current?.focus(), 50)
    },
+    addAssistantMessage(content: string) {
+      setMessages((prev) => {
+        if (!prev.some((m) => m.role === "user")) {
+          return [
+            { role: "user", content: "Search Facebook" },
+            { role: "assistant", content },
+          ]
+        }
+        return [...prev, { role: "assistant", content }]
+      })
+    },
  }), [])

  const checkServer = useCallback(async () => {
@@ -1,7 +1,7 @@
 "use client"

 import { useState, useEffect } from "react"
-import { Briefcase, ChevronDown, Loader2 } from "lucide-react"
+import { Briefcase, ChevronDown, Loader2, Search } from "lucide-react"

 interface Job {
  job_title: string
@@ -12,9 +12,11 @@ interface Job {

 interface JobSelectorProps {
  onSelect: (job: Job | null) => void
+  onSearch?: (job: Job) => void
+  searching?: boolean
 }

-export function JobSelector({ onSelect }: JobSelectorProps) {
+export function JobSelector({ onSelect, onSearch, searching }: JobSelectorProps) {
  const [jobs, setJobs] = useState<Job[]>([])
  const [loading, setLoading] = useState(true)
  const [open, setOpen] = useState(false)
@@ -35,39 +37,53 @@ export function JobSelector({ onSelect }: JobSelectorProps) {
  }

  return (
-    <div className="relative">
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        className="w-full flex items-center gap-2.5 bg-[#1a1d2e] border border-[#ffffff0f] hover:border-[#f97316]/30 rounded-xl px-4 py-3 text-sm text-[#9ca3af] hover:text-[#e5e7eb] transition-all duration-200"
-      >
-        <Briefcase className="h-4 w-4 text-[#f97316] flex-none" />
-        <span className="flex-1 text-left truncate">
-          {selected ? selected.job_title : loading ? "Loading jobs..." : "Select a job category"}
-        </span>
-        {loading ? <Loader2 className="h-3.5 w-3.5 animate-spin text-[#f97316]" /> : <ChevronDown className={`h-3.5 w-3.5 text-[#4b5563] transition-transform duration-200 ${open ? "rotate-180" : ""}`} />}
-      </button>
+    <div>
+      <div className="relative">
+        <button
+          type="button"
+          onClick={() => setOpen(!open)}
+          className="w-full flex items-center gap-2.5 bg-[#1a1d2e] border border-[#ffffff0f] hover:border-[#f97316]/30 rounded-xl px-4 py-3 text-sm text-[#9ca3af] hover:text-[#e5e7eb] transition-all duration-200"
+        >
+          <Briefcase className="h-4 w-4 text-[#f97316] flex-none" />
+          <span className="flex-1 text-left truncate">
+            {selected ? selected.job_title : loading ? "Loading jobs..." : "Select a job category to target"}
+          </span>
+          {loading ? <Loader2 className="h-3.5 w-3.5 animate-spin text-[#f97316]" /> : <ChevronDown className={`h-3.5 w-3.5 text-[#4b5563] transition-transform duration-200 ${open ? "rotate-180" : ""}`} />}
+        </button>

-      {open && (
-        <>
-          <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
-          <div className="absolute top-full left-0 right-0 mt-1.5 z-20 bg-[#1a1d2e] border border-[#ffffff0f] rounded-xl shadow-xl shadow-black/40 max-h-60 overflow-y-auto">
-            {jobs.map((job, i) => (
-              <button
-                key={i}
-                type="button"
-                onClick={() => handleSelect(job)}
-                className="w-full text-left px-4 py-3 text-sm text-[#9ca3af] hover:bg-[#1f2437] hover:text-[#e5e7eb] transition-all duration-150 border-b border-[#ffffff08] last:border-0 border-l-2 border-l-transparent hover:border-l-[#f97316]/40"
-              >
-                <div className="font-medium">{job.job_title}</div>
-                <div className="text-xs text-[#4b5563] mt-0.5">{job.industry} &mdash; {job.description}</div>
-              </button>
-            ))}
-            {jobs.length === 0 && !loading && (
-              <div className="px-4 py-4 text-xs text-[#4b5563] text-center">No job categories loaded</div>
-            )}
-          </div>
-        </>
+        {open && (
+          <>
+            <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
+            <div className="absolute top-full left-0 right-0 mt-1.5 z-20 bg-[#1a1d2e] border border-[#ffffff0f] rounded-xl shadow-xl shadow-black/40 max-h-60 overflow-y-auto">
+              {jobs.map((job, i) => (
+                <button
+                  key={i}
+                  type="button"
+                  onClick={() => handleSelect(job)}
+                  className="w-full text-left px-4 py-3 text-sm text-[#9ca3af] hover:bg-[#1f2437] hover:text-[#e5e7eb] transition-all duration-150 border-b border-[#ffffff08] last:border-0 border-l-2 border-l-transparent hover:border-l-[#f97316]/40"
+                >
+                  <div className="font-medium">{job.job_title}</div>
+                  <div className="text-xs text-[#4b5563] mt-0.5">{job.industry} &mdash; {job.description}</div>
+                </button>
+              ))}
+              {jobs.length === 0 && !loading && (
+                <div className="px-4 py-4 text-xs text-[#4b5563] text-center">No job categories loaded</div>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+
+      {selected && (
+        <button
+          type="button"
+          onClick={() => onSearch?.(selected)}
+          disabled={searching}
+          className="w-full mt-2 flex items-center justify-center gap-2 bg-gradient-to-br from-[#f97316] to-[#ea580c] hover:from-[#ea580c] hover:to-[#d97706] disabled:opacity-50 disabled:cursor-not-allowed rounded-xl px-4 py-2.5 text-sm font-semibold text-white transition-all duration-200 shadow-[0_0_20px_rgba(249,115,22,0.2)]"
+        >
+          {searching ? <Loader2 className="h-4 w-4 animate-spin" /> : <Search className="h-4 w-4" />}
+          {searching ? "Searching Facebook..." : "Search Facebook"}
+        </button>
      )}
    </div>
  )