Fixed the messages, chats, voice note, voice call, stickers, gifs, emoji's , file attachments
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
import { NextRequest, NextResponse } from "next/server"
|
||||
import { chatWithAI } from "@/lib/ai"
|
||||
import { getSessionUser } from "@/lib/auth"
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const user = await getSessionUser()
|
||||
if (!user) {
|
||||
return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
}
|
||||
|
||||
const { message } = await request.json()
|
||||
if (!message || typeof message !== "string") {
|
||||
return NextResponse.json({ error: "Message is required" }, { status: 400 })
|
||||
}
|
||||
|
||||
const sessionCookie = request.cookies.get("session")
|
||||
const jwtToken = sessionCookie?.value
|
||||
if (!jwtToken) {
|
||||
return NextResponse.json({ error: "No session token" }, { status: 401 })
|
||||
}
|
||||
|
||||
const response = await chatWithAI(message, jwtToken)
|
||||
return NextResponse.json({ response })
|
||||
} catch (error: any) {
|
||||
console.error("AI chat error:", error)
|
||||
return NextResponse.json({ error: error.message || "AI service error" }, { status: 500 })
|
||||
}
|
||||
}
|
||||
+110
-32
@@ -1,7 +1,7 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useRef, useEffect, Fragment } from "react"
|
||||
import { Send, Loader2, Bot, User, RefreshCw, AlertCircle } from "lucide-react"
|
||||
import { Send, Bot, User, RefreshCw, AlertCircle, Check, Terminal } from "lucide-react"
|
||||
|
||||
function linkifyText(text: string) {
|
||||
const urlRegex = /(https?:\/\/[^\s<]+[^\s<.,;:!?)\]}>])/
|
||||
@@ -24,9 +24,26 @@ export function AIChat() {
|
||||
const [input, setInput] = useState("")
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState("")
|
||||
const [ollamaStatus, setOllamaStatus] = useState<boolean | null>(null)
|
||||
const [bootState, setBootState] = useState<"booting" | "ready" | "error">("booting")
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const checkServer = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/ai/chat", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ message: "ping" }),
|
||||
})
|
||||
if (res.status !== 503) {
|
||||
setBootState("ready")
|
||||
} else {
|
||||
setTimeout(checkServer, 2000)
|
||||
}
|
||||
} catch {
|
||||
setTimeout(checkServer, 2000)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/ai/jobs")
|
||||
.then((r) => r.json())
|
||||
@@ -56,29 +73,13 @@ export function AIChat() {
|
||||
},
|
||||
])
|
||||
})
|
||||
checkServer()
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
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
|
||||
@@ -96,8 +97,8 @@ export function AIChat() {
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json()
|
||||
throw new Error(data.error || "Failed to get response")
|
||||
const data = await res.json().catch(() => ({}))
|
||||
throw new Error(data.error || `Error ${res.status}`)
|
||||
}
|
||||
|
||||
const data = await res.json()
|
||||
@@ -121,17 +122,86 @@ export function AIChat() {
|
||||
}
|
||||
}
|
||||
|
||||
const bootOverlay = (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<style>{`
|
||||
@keyframes walk {
|
||||
0%, 100% { transform: translateX(0) translateY(0); }
|
||||
25% { transform: translateX(12px) translateY(-4px); }
|
||||
50% { transform: translateX(24px) translateY(0); }
|
||||
75% { transform: translateX(12px) translateY(-4px); }
|
||||
}
|
||||
@keyframes legLeft {
|
||||
0%, 100% { transform: rotate(-10deg); }
|
||||
50% { transform: rotate(10deg); }
|
||||
}
|
||||
@keyframes legRight {
|
||||
0%, 100% { transform: rotate(10deg); }
|
||||
50% { transform: rotate(-10deg); }
|
||||
}
|
||||
@keyframes armLeft {
|
||||
0%, 100% { transform: rotate(15deg); }
|
||||
50% { transform: rotate(-15deg); }
|
||||
}
|
||||
@keyframes armRight {
|
||||
0%, 100% { transform: rotate(-15deg); }
|
||||
50% { transform: rotate(15deg); }
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 45%, 55%, 100% { height: 4px; }
|
||||
50% { height: 1px; }
|
||||
}
|
||||
.robot-walk { animation: walk 0.6s ease-in-out infinite; }
|
||||
.robot-leg-l { transform-origin: top center; animation: legLeft 0.3s ease-in-out infinite; }
|
||||
.robot-leg-r { transform-origin: top center; animation: legRight 0.3s ease-in-out infinite; }
|
||||
.robot-arm-l { transform-origin: top center; animation: armLeft 0.3s ease-in-out infinite; }
|
||||
.robot-arm-r { transform-origin: top center; animation: armRight 0.3s ease-in-out infinite; }
|
||||
.robot-eye { animation: blink 2s ease-in-out infinite; }
|
||||
`}</style>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<p className="text-sm text-[#6a6a75]">Servers booting...</p>
|
||||
<div className="h-[50px] w-[100px] bg-[#1a1a24] border border-[#2a2a35] rounded-lg flex items-center justify-center overflow-hidden">
|
||||
<div className="robot-walk relative">
|
||||
<svg width="40" height="36" viewBox="0 0 40 36" fill="none">
|
||||
<rect x="10" y="2" width="20" height="16" rx="3" fill="#1BB0CE" opacity="0.9"/>
|
||||
<rect x="6" y="6" width="6" height="2" rx="1" className="robot-arm-l" fill="#1BB0CE" opacity="0.7"/>
|
||||
<rect x="28" y="6" width="6" height="2" rx="1" className="robot-arm-r" fill="#1BB0CE" opacity="0.7"/>
|
||||
<rect x="14" y="5" width="4" height="4" rx="1" fill="#0d1117"/>
|
||||
<rect x="22" y="5" width="4" height="4" rx="1" fill="#0d1117"/>
|
||||
<circle cx="16" cy="7" r="1.5" className="robot-eye" fill="#1BB0CE"/>
|
||||
<circle cx="24" cy="7" r="1.5" className="robot-eye" fill="#1BB0CE"/>
|
||||
<rect x="17" y="10" width="6" height="2" rx="1" fill="#0d1117"/>
|
||||
<rect x="12" y="18" width="5" height="10" rx="2" className="robot-leg-l" fill="#1BB0CE" opacity="0.8"/>
|
||||
<rect x="23" y="18" width="5" height="10" rx="2" className="robot-leg-r" fill="#1BB0CE" opacity="0.8"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
const readyOverlay = (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="h-[50px] w-[100px] bg-[#1a1a24] border border-[#2a2a35] rounded-lg flex items-center justify-center">
|
||||
<Check className="h-6 w-6 text-green-400" />
|
||||
</div>
|
||||
<div className="text-center space-y-1">
|
||||
<p className="text-xs text-[#6a6a75]">Try these commands:</p>
|
||||
<div className="flex gap-2">
|
||||
<code className="text-xs px-2 py-1 rounded bg-[#2a2a35] text-[#1BB0CE] flex items-center gap-1"><Terminal className="h-3 w-3" /> lists</code>
|
||||
<code className="text-xs px-2 py-1 rounded bg-[#2a2a35] text-[#1BB0CE] flex items-center gap-1"><Terminal className="h-3 w-3" /> leads</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
if (bootState === "booting") return bootOverlay
|
||||
|
||||
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>
|
||||
)}
|
||||
{bootState === "ready" && readyOverlay}
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4 scrollbar-thin">
|
||||
{messages.map((msg, i) => (
|
||||
@@ -163,7 +233,10 @@ export function AIChat() {
|
||||
<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]" />
|
||||
<svg className="h-4 w-4 animate-spin text-[#1BB0CE]" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" opacity="0.25"/>
|
||||
<path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="4" strokeLinecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -192,7 +265,12 @@ export function AIChat() {
|
||||
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" />}
|
||||
{loading ? (
|
||||
<svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" opacity="0.25"/>
|
||||
<path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="4" strokeLinecap="round"/>
|
||||
</svg>
|
||||
) : <Send className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+61
-26
@@ -1,41 +1,76 @@
|
||||
import http from "http"
|
||||
|
||||
const AI_SERVICE = process.env.AI_SERVICE_URL || "http://localhost:3001"
|
||||
|
||||
function parseUrl(url: string) {
|
||||
const u = new URL(url)
|
||||
return { hostname: u.hostname, port: parseInt(u.port) || 80, path: u.pathname + u.search }
|
||||
}
|
||||
|
||||
export async function chatWithAI(message: string, jwtToken: string) {
|
||||
const res = await fetch(`${AI_SERVICE}/ai/chat`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${jwtToken}` },
|
||||
body: JSON.stringify({ message }),
|
||||
const body = JSON.stringify({ message })
|
||||
const { hostname, port, path } = parseUrl(`${AI_SERVICE}/ai/chat`)
|
||||
|
||||
const text = await new Promise<string>((resolve, reject) => {
|
||||
const req = http.request(
|
||||
{ hostname, port, path, method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${jwtToken}`, "Content-Length": Buffer.byteLength(body) } },
|
||||
(res) => {
|
||||
let data = ""
|
||||
res.on("data", (chunk) => data += chunk)
|
||||
res.on("end", () => {
|
||||
if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) {
|
||||
resolve(data)
|
||||
} else {
|
||||
reject(new Error(`AI error ${res.statusCode}: ${data.substring(0, 200)}`))
|
||||
}
|
||||
})
|
||||
}
|
||||
)
|
||||
req.on("error", reject)
|
||||
req.write(body)
|
||||
req.end()
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
const text = await res.text()
|
||||
throw new Error(`AI service error (${res.status}): ${text}`)
|
||||
}
|
||||
|
||||
const data = await res.json()
|
||||
const data = JSON.parse(text)
|
||||
return data.response || ""
|
||||
}
|
||||
|
||||
export async function fetchJobs() {
|
||||
export async function checkAiServiceStatus() {
|
||||
const { hostname, port, path } = parseUrl(`${AI_SERVICE}/health`)
|
||||
try {
|
||||
const res = await fetch(`${AI_SERVICE}/ai/jobs`)
|
||||
if (!res.ok) return []
|
||||
const data = await res.json()
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
const req = http.get({ hostname, port, path, timeout: 3000 }, (res) => {
|
||||
let data = ""
|
||||
res.on("data", (chunk) => data += chunk)
|
||||
res.on("end", () => {
|
||||
try { resolve(JSON.parse(data).status === "ok" ? undefined : reject(new Error("not ok"))) } catch { reject(new Error("bad response")) }
|
||||
})
|
||||
})
|
||||
req.on("error", reject)
|
||||
req.on("timeout", () => { req.destroy(); reject(new Error("timeout")) })
|
||||
})
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchJobs() {
|
||||
const { hostname, port, path } = parseUrl(`${AI_SERVICE}/ai/jobs`)
|
||||
try {
|
||||
const text = await new Promise<string>((resolve, reject) => {
|
||||
const req = http.get({ hostname, port, path, timeout: 5000 }, (res) => {
|
||||
let data = ""
|
||||
res.on("data", (chunk) => data += chunk)
|
||||
res.on("end", () => resolve(data))
|
||||
})
|
||||
req.on("error", reject)
|
||||
req.on("timeout", () => { req.destroy(); reject(new Error("timeout")) })
|
||||
})
|
||||
const data = JSON.parse(text)
|
||||
return data.jobs || []
|
||||
} catch {
|
||||
console.warn("Failed to fetch AI jobs")
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
console.warn("Failed to check AI service status")
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user