AI somewhat added

src/app/(dashboard)/ai-assistant/page.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import { useState, useCallback } from "react"
+import { AIChat } from "@/components/ai/ai-chat"
+import { JobSelector } from "@/components/ai/job-selector"
+import { Bot, Lightbulb, Target, MessageSquare } from "lucide-react"
+
+export default function AIAssistantPage() {
+  const [selectedJob, setSelectedJob] = useState<{ job_title: string; keywords: string[]; industry: string; description: string } | null>(null)
+
+  const handleJobSelect = useCallback((job: typeof selectedJob) => {
+    setSelectedJob(job)
+  }, [])
+
+  return (
+    <div className="flex h-[calc(100vh-3.5rem)]">
+      <div className="flex-1 flex flex-col min-w-0">
+        <div className="border-b border-[#2a2a35] px-6 py-4">
+          <div className="flex items-center gap-3">
+            <div className="h-9 w-9 rounded-lg bg-[#1BB0CE]/15 flex items-center justify-center">
+              <Bot className="h-5 w-5 text-[#1BB0CE]" />
+            </div>
+            <div>
+              <h1 className="text-lg font-semibold text-[#e8e8ef]">AI Sales Assistant</h1>
+              <p className="text-xs text-[#6a6a75]">Uncensored sales tips and strategies powered by local AI</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex-1 flex">
+          <div className="flex-1 flex flex-col min-w-0 border-r border-[#2a2a35]">
+            <AIChat />
+          </div>
+
+          <div className="w-72 flex-none p-4 space-y-4 overflow-y-auto">
+            <div>
+              <h3 className="text-xs font-semibold text-[#6a6a75] uppercase tracking-wider mb-2 flex items-center gap-1.5">
+                <Target className="h-3.5 w-3.5" />
+                Target Job
+              </h3>
+              <JobSelector onSelect={handleJobSelect} />
+            </div>
+
+            {selectedJob && (
+              <div className="bg-[#1a1a24] border border-[#2a2a35] rounded-lg p-3 space-y-2">
+                <h4 className="text-sm font-medium text-[#e8e8ef]">{selectedJob.job_title}</h4>
+                <div className="flex items-center gap-1.5">
+                  <span className="text-xs px-1.5 py-0.5 rounded bg-[#1BB0CE]/10 text-[#1BB0CE]">{selectedJob.industry}</span>
+                </div>
+                <p className="text-xs text-[#8a8a95]">{selectedJob.description}</p>
+                <div className="flex flex-wrap gap-1">
+                  {selectedJob.keywords.map((kw, i) => (
+                    <span key={i} className="text-xs px-1.5 py-0.5 rounded bg-[#2a2a35] text-[#6a6a75]">
+                      {kw}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div className="bg-[#1a1a24] border border-[#2a2a35] rounded-lg p-3 space-y-2">
+              <h4 className="text-xs font-semibold text-[#6a6a75] uppercase tracking-wider flex items-center gap-1.5">
+                <Lightbulb className="h-3.5 w-3.5" />
+                Tips
+              </h4>
+              <ul className="space-y-1.5 text-xs text-[#8a8a95]">
+                <li className="flex gap-2">
+                  <MessageSquare className="h-3 w-3 mt-0.5 flex-none text-[#1BB0CE]" />
+                  Ask for cold email templates for a specific job
+                </li>
+                <li className="flex gap-2">
+                  <MessageSquare className="h-3 w-3 mt-0.5 flex-none text-[#1BB0CE]" />
+                  Request objection handling tips
+                </li>
+                <li className="flex gap-2">
+                  <MessageSquare className="h-3 w-3 mt-0.5 flex-none text-[#1BB0CE]" />
+                  Ask for outreach strategies per industry
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/api/ai/chat/route.ts

@@ -0,0 +1,26 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getSessionUser } from "@/lib/auth"
+import { chatWithAI } from "@/lib/ai"
+
+export async function POST(request: NextRequest) {
+  try {
+    const user = await getSessionUser()
+    if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+
+    if (!["sales", "admin", "super_admin"].includes(user.role)) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 })
+    }
+
+    const { message } = await request.json()
+    if (!message || typeof message !== "string") {
+      return NextResponse.json({ error: "Message is required" }, { status: 400 })
+    }
+
+    const response = await chatWithAI(message, user.id, user.role)
+
+    return NextResponse.json({ response })
+  } catch (error) {
+    console.error("AI chat error:", error)
+    return NextResponse.json({ error: "AI service unavailable" }, { status: 503 })
+  }
+}

src/app/api/ai/jobs/route.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from "next/server"
+import { getSessionUser } from "@/lib/auth"
+import { fetchJobs } from "@/lib/ai"
+
+export async function GET() {
+  try {
+    const user = await getSessionUser()
+    if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+
+    if (!["sales", "admin", "super_admin"].includes(user.role)) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 })
+    }
+
+    const jobs = await fetchJobs()
+    return NextResponse.json({ jobs })
+  } catch {
+    return NextResponse.json({ jobs: [] })
+  }
+}

src/components/ai/ai-chat.tsx

@@ -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>
+  )
+}

src/components/ai/job-selector.tsx

@@ -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>
+  )
+}

src/components/layout/sidebar.tsx

@@ -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}>

src/lib/ai.ts

@@ -0,0 +1,59 @@
+const AI_SERVICE = process.env.AI_SERVICE_URL || "http://localhost:3001"
+
+export async function chatWithAI(message: string, userId: string, userRole: string) {
+  const res = await fetch(`${AI_SERVICE}/ai/chat`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ message, user_id: userId, user_role: userRole }),
+  })
+
+  if (!res.ok) {
+    const text = await res.text()
+    throw new Error(`AI service error (${res.status}): ${text}`)
+  }
+
+  const data = await res.json()
+  return data.response || ""
+}
+
+export async function fetchJobs() {
+  try {
+    const res = await fetch(`${AI_SERVICE}/ai/jobs`)
+    if (!res.ok) return []
+    const data = await res.json()
+    return data.jobs || []
+  } catch {
+    return []
+  }
+}
+
+export async function getInstructions() {
+  try {
+    const res = await fetch(`${AI_SERVICE}/ai/instructions`)
+    if (!res.ok) return null
+    const data = await res.json()
+    return data.success ? data.instructions : null
+  } catch {
+    return null
+  }
+}
+
+export async function updateInstructions(entry: string, content?: string) {
+  const res = await fetch(`${AI_SERVICE}/ai/instructions`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ entry, content }),
+  })
+  return res.ok
+}
+
+export async function checkAiServiceStatus() {
+  try {
+    const res = await fetch(`${AI_SERVICE}/health`)
+    if (!res.ok) return false
+    const data = await res.json()
+    return data.status === "ok"
+  } catch {
+    return false
+  }
+}