AI somewhat added

2026-06-22 12:37:38 +02:00
parent 571af27f50
commit be5808f3fc
18 changed files with 4428 additions and 3 deletions
@@ -0,0 +1,222 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react"
+import { Send, Loader2, Bot, User, RefreshCw, AlertCircle } from "lucide-react"
+
+interface ChatMessage {
+  role: "user" | "assistant"
+  content: string
+}
+
+export function AIChat() {
+  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [input, setInput] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState("")
+  const [ollamaStatus, setOllamaStatus] = useState<boolean | null>(null)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    fetch("/api/ai/jobs")
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.jobs?.length) {
+          const jobNames = data.jobs.map((j: { job_title: string }) => j.job_title).join(", ")
+          setMessages([
+            {
+              role: "assistant",
+              content: `Hi! I'm your Sales AI Assistant. I can help you with tips for targeting: ${jobNames}. What would you like to know?`,
+            },
+          ])
+        } else {
+          setMessages([
+            {
+              role: "assistant",
+              content: "Hi! I'm your Sales AI Assistant. Ask me anything about sales strategies and prospect targeting.",
+            },
+          ])
+        }
+      })
+      .catch(() => {
+        setMessages([
+          {
+            role: "assistant",
+            content: "Hi! I'm your Sales AI Assistant. Ask me anything about sales strategies and prospect targeting.",
+          },
+        ])
+      })
+
+    fetch("/api/ai/jobs")
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.jobs) {
+          const names = data.jobs.map((j: { job_title: string }) => j.job_title)
+          setMessages([
+            {
+              role: "assistant",
+              content: `Hi! I'm your Sales AI Assistant. I can help with tips for targeting:\n\n${names.map((n: string) => `• ${n}`).join("\n")}\n\nWhat would you like to know?`,
+            },
+          ])
+        }
+      })
+  }, [])
+
+  useEffect(() => {
+    fetch("/api/ai/jobs")
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.jobs?.length) {
+          const names = data.jobs.map((j: { job_title: string }) => j.job_title)
+          setMessages((prev) =>
+            prev.length === 1 && prev[0].role === "assistant"
+              ? [
+                  {
+                    role: "assistant",
+                    content: `Hi! I'm your Sales AI Assistant. I can help with tips for targeting:\n\n${names.map((n: string) => `• ${n}`).join("\n")}\n\nWhat would you like to know?`,
+                  },
+                ]
+              : prev,
+          )
+        }
+      })
+  }, [])
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+  }, [messages])
+
+  const checkOllama = async () => {
+    try {
+      const res = await fetch("/api/ai/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: "__ping__" }),
+      })
+      setOllamaStatus(res.status !== 503)
+    } catch {
+      setOllamaStatus(false)
+    }
+  }
+
+  useEffect(() => { checkOllama() }, [])
+
+  const sendMessage = async () => {
+    const msg = input.trim()
+    if (!msg || loading) return
+
+    setInput("")
+    setError("")
+    setMessages((prev) => [...prev, { role: "user", content: msg }])
+    setLoading(true)
+
+    try {
+      const res = await fetch("/api/ai/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: msg }),
+      })
+
+      if (!res.ok) {
+        const data = await res.json()
+        throw new Error(data.error || "Failed to get response")
+      }
+
+      const data = await res.json()
+      setMessages((prev) => [...prev, { role: "assistant", content: data.response }])
+    } catch (err) {
+      const errMsg = err instanceof Error ? err.message : "AI service unavailable"
+      setError(errMsg)
+      setMessages((prev) => [
+        ...prev,
+        { role: "assistant", content: `⚠️ Error: ${errMsg}. Make sure Ollama is running with the model loaded.` },
+      ])
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault()
+      sendMessage()
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {ollamaStatus === false && (
+        <div className="flex items-center gap-2 px-4 py-2 bg-amber-500/10 border-b border-amber-500/20 text-amber-400 text-xs">
+          <AlertCircle className="h-3.5 w-3.5 flex-none" />
+          <span className="flex-1">Ollama not responding. Start it with <code className="bg-amber-500/20 px-1 rounded">ollama serve</code></span>
+          <button type="button" onClick={checkOllama} className="hover:text-amber-300">
+            <RefreshCw className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      )}
+
+      <div className="flex-1 overflow-y-auto p-4 space-y-4 scrollbar-thin">
+        {messages.map((msg, i) => (
+          <div key={i} className={`flex gap-3 ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
+            {msg.role === "assistant" && (
+              <div className="h-8 w-8 rounded-full bg-[#1BB0CE]/20 flex items-center justify-center flex-none">
+                <Bot className="h-4 w-4 text-[#1BB0CE]" />
+              </div>
+            )}
+            <div
+              className={`max-w-[75%] rounded-lg px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap ${
+                msg.role === "user"
+                  ? "bg-[#1BB0CE] text-white"
+                  : "bg-[#1a1a24] text-[#c8c8d0] border border-[#2a2a35]"
+              }`}
+            >
+              {msg.content}
+            </div>
+            {msg.role === "user" && (
+              <div className="h-8 w-8 rounded-full bg-[#1BB0CE] flex items-center justify-center flex-none">
+                <User className="h-4 w-4 text-white" />
+              </div>
+            )}
+          </div>
+        ))}
+        {loading && (
+          <div className="flex gap-3 justify-start">
+            <div className="h-8 w-8 rounded-full bg-[#1BB0CE]/20 flex items-center justify-center flex-none">
+              <Bot className="h-4 w-4 text-[#1BB0CE]" />
+            </div>
+            <div className="max-w-[75%] rounded-lg px-4 py-2.5 bg-[#1a1a24] border border-[#2a2a35]">
+              <Loader2 className="h-4 w-4 animate-spin text-[#1BB0CE]" />
+            </div>
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="border-t border-[#2a2a35] p-4">
+        {error && (
+          <div className="mb-2 text-xs text-red-400 flex items-center gap-1.5">
+            <AlertCircle className="h-3 w-3" />
+            {error}
+          </div>
+        )}
+        <div className="flex gap-2">
+          <textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Ask for sales tips..."
+            rows={1}
+            className="flex-1 bg-[#1a1a24] border border-[#2a2a35] rounded-lg px-3 py-2 text-sm text-[#e8e8ef] placeholder-[#6a6a75] resize-none outline-none focus:border-[#1BB0CE]/50"
+          />
+          <button
+            type="button"
+            onClick={sendMessage}
+            disabled={loading || !input.trim()}
+            className="h-9 w-9 rounded-lg bg-[#1BB0CE] hover:bg-[#1BB0CE]/80 disabled:opacity-40 flex items-center justify-center flex-none transition-colors"
+          >
+            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,74 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Briefcase, ChevronDown, Loader2 } from "lucide-react"
+
+interface Job {
+  job_title: string
+  keywords: string[]
+  industry: string
+  description: string
+}
+
+interface JobSelectorProps {
+  onSelect: (job: Job | null) => void
+}
+
+export function JobSelector({ onSelect }: JobSelectorProps) {
+  const [jobs, setJobs] = useState<Job[]>([])
+  const [loading, setLoading] = useState(true)
+  const [open, setOpen] = useState(false)
+  const [selected, setSelected] = useState<Job | null>(null)
+
+  useEffect(() => {
+    fetch("/api/ai/jobs")
+      .then((r) => r.json())
+      .then((data) => setJobs(data.jobs || []))
+      .catch(() => setJobs([]))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const handleSelect = (job: Job) => {
+    setSelected(job)
+    setOpen(false)
+    onSelect(job)
+  }
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center gap-2 bg-[#1a1a24] border border-[#2a2a35] rounded-lg px-3 py-2 text-sm text-[#e8e8ef] hover:border-[#1BB0CE]/50 transition-colors"
+      >
+        <Briefcase className="h-4 w-4 text-[#1BB0CE] 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" /> : <ChevronDown className="h-3.5 w-3.5 text-[#6a6a75]" />}
+      </button>
+
+      {open && (
+        <>
+          <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
+          <div className="absolute top-full left-0 right-0 mt-1 z-20 bg-[#15151e] border border-[#2a2a35] rounded-lg shadow-xl max-h-60 overflow-y-auto">
+            {jobs.map((job, i) => (
+              <button
+                key={i}
+                type="button"
+                onClick={() => handleSelect(job)}
+                className="w-full text-left px-3 py-2.5 text-sm text-[#c8c8d0] hover:bg-[#1a1a24] hover:text-[#e8e8ef] transition-colors border-b border-[#1a1a24] last:border-0"
+              >
+                <div className="font-medium">{job.job_title}</div>
+                <div className="text-xs text-[#6a6a75] mt-0.5">{job.industry} — {job.description}</div>
+              </button>
+            ))}
+            {jobs.length === 0 && !loading && (
+              <div className="px-3 py-4 text-xs text-[#6a6a75] text-center">No job categories loaded</div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
@@ -17,6 +17,7 @@ import {
  Building2,
  PanelLeftClose,
  MessageSquare,
+  Bot,
 } from "lucide-react"
 import { COMPANY_NAME } from "@/lib/constants"
 import { useUser } from "@/providers/user-provider"
@@ -26,6 +27,7 @@ const navItems = [
  { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
  { href: "/leads", label: "Leads", icon: Users },
  { href: "/chats", label: "Chats", icon: MessageSquare },
+  { href: "/ai-assistant", label: "AI Assistant", icon: Bot, roles: ["sales", "admin", "super_admin"] },
  { href: "/users", label: "Users", icon: Building2 },
  { href: "/settings", label: "Settings", icon: Settings },
 ]
@@ -87,7 +89,7 @@ export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: Side

      {/* Navigation */}
      <nav className="flex-1 space-y-1 p-3">
-        {navItems.map((item) => {
+        {navItems.filter((item) => !item.roles || item.roles.includes(user.role)).map((item) => {
          const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))
          return collapsed ? (
            <TooltipProvider key={item.href} delayDuration={0}>