fix(forum): remove AI assistant disclosure from Integration Room
This commit is contained in:
@@ -1,66 +1,5 @@
|
|||||||
import { NextRequest, NextResponse } from 'next/server';
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
import { createClient } from '@/lib/supabase/server';
|
|
||||||
import { hybridAI } from '@/lib/ai/hybridRouter';
|
|
||||||
|
|
||||||
export async function POST(req: NextRequest) {
|
export async function POST(_req: NextRequest) {
|
||||||
try {
|
return NextResponse.json({ error: 'Feature unavailable' }, { status: 410 });
|
||||||
const body = await req.json();
|
}
|
||||||
const { thread_id, question, thread_title, thread_body, replies } = body;
|
|
||||||
|
|
||||||
if (!thread_id || !question) {
|
|
||||||
return NextResponse.json({ error: 'thread_id and question are required' }, { status: 400 });
|
|
||||||
}
|
|
||||||
|
|
||||||
const existingContext = replies?.length
|
|
||||||
? replies.map((r: any) => `${r.author_name}: ${r.body}`).join('\n\n')
|
|
||||||
: '';
|
|
||||||
|
|
||||||
const result = await hybridAI(
|
|
||||||
[
|
|
||||||
{
|
|
||||||
role: 'system',
|
|
||||||
content: `You are the AV Beat AI Assistant — a knowledgeable, helpful assistant for pro AV, live production, and display tech professionals. You have deep expertise in AV technology including AV-over-IP, control systems, projection & display, audio engineering, conferencing, live production, signal flow, and the pro AV industry.
|
|
||||||
|
|
||||||
You are responding in a community forum. Be helpful, technically accurate, and conversational. Acknowledge when a question is complex or when professional consultation is advisable. Keep responses focused and practical — broadcast engineers value concise, actionable information.
|
|
||||||
|
|
||||||
Important: You are an AI assistant. Be transparent about this if asked. Do not pretend to be a human.`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
role: 'user',
|
|
||||||
content: `Forum thread: "${thread_title}"
|
|
||||||
|
|
||||||
Original post: ${thread_body}
|
|
||||||
|
|
||||||
${existingContext ? `Existing discussion:\n${existingContext}\n\n` : ''}New question: ${question}
|
|
||||||
|
|
||||||
Please provide a helpful, technically accurate response for this pro AV / live production forum thread.`,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
{ maxTokens: 600, isBackground: false, priority: 2 }
|
|
||||||
);
|
|
||||||
|
|
||||||
const aiResponseText = result.text;
|
|
||||||
|
|
||||||
if (!aiResponseText) {
|
|
||||||
return NextResponse.json({ error: 'No response from AI' }, { status: 500 });
|
|
||||||
}
|
|
||||||
|
|
||||||
const supabase = await createClient();
|
|
||||||
const { data: savedReply, error: saveError } = await supabase
|
|
||||||
.from('forum_replies')
|
|
||||||
.insert({
|
|
||||||
thread_id,
|
|
||||||
body: aiResponseText,
|
|
||||||
author_name: 'AV Beat AI',
|
|
||||||
is_ai_response: true,
|
|
||||||
})
|
|
||||||
.select()
|
|
||||||
.single();
|
|
||||||
|
|
||||||
if (saveError) throw saveError;
|
|
||||||
|
|
||||||
return NextResponse.json({ reply: savedReply });
|
|
||||||
} catch (err: any) {
|
|
||||||
return NextResponse.json({ error: err.message }, { status: 500 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -629,7 +629,6 @@ export default function ForumIndexPage() {
|
|||||||
<ul className="text-[#475569] font-body text-sm space-y-1">
|
<ul className="text-[#475569] font-body text-sm space-y-1">
|
||||||
<li>• Be respectful and professional — this is a community of peers</li>
|
<li>• Be respectful and professional — this is a community of peers</li>
|
||||||
<li>• Share real-world experience and cite sources when possible</li>
|
<li>• Share real-world experience and cite sources when possible</li>
|
||||||
<li>• The <span className="text-[#1D4ED8]">AV Beat AI</span> assistant is available in threads to help answer questions — it is clearly labeled</li>
|
|
||||||
<li>• No spam, self-promotion, or vendor pitches without disclosure</li>
|
<li>• No spam, self-promotion, or vendor pitches without disclosure</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -64,14 +64,7 @@ function timeAgo(dateStr: string): string {
|
|||||||
return new Date(dateStr).toLocaleDateString();
|
return new Date(dateStr).toLocaleDateString();
|
||||||
}
|
}
|
||||||
|
|
||||||
function Avatar({ name, isAI }: { name: string; isAI: boolean }) {
|
function Avatar({ name }: { name: string }) {
|
||||||
if (isAI) {
|
|
||||||
return (
|
|
||||||
<div className="w-9 h-9 rounded-full bg-[#DCE6F2] border border-[#1D4ED8] flex items-center justify-center flex-shrink-0">
|
|
||||||
<span className="text-[#1D4ED8] text-xs font-bold">AI</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const initials = name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
|
const initials = name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
|
||||||
const colors = ['#DCE6F2', '#1a3a2a', '#3a1a1a', '#2a1a3a', '#1a2a3a'];
|
const colors = ['#DCE6F2', '#1a3a2a', '#3a1a1a', '#2a1a3a', '#1a2a3a'];
|
||||||
const colorIdx = name.charCodeAt(0) % colors.length;
|
const colorIdx = name.charCodeAt(0) % colors.length;
|
||||||
@@ -91,11 +84,10 @@ interface VoteButtonsProps {
|
|||||||
upvotes: number;
|
upvotes: number;
|
||||||
downvotes: number;
|
downvotes: number;
|
||||||
voteScore: number;
|
voteScore: number;
|
||||||
isAI?: boolean;
|
|
||||||
isAuthenticated: boolean;
|
isAuthenticated: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
function VoteButtons({ targetType, targetId, upvotes, downvotes, voteScore, isAI, isAuthenticated }: VoteButtonsProps) {
|
function VoteButtons({ targetType, targetId, upvotes, downvotes, voteScore, isAuthenticated }: VoteButtonsProps) {
|
||||||
const [currentVote, setCurrentVote] = useState<1 | -1 | null>(null);
|
const [currentVote, setCurrentVote] = useState<1 | -1 | null>(null);
|
||||||
const [counts, setCounts] = useState({ upvotes, downvotes, vote_score: voteScore });
|
const [counts, setCounts] = useState({ upvotes, downvotes, vote_score: voteScore });
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
@@ -113,7 +105,7 @@ function VoteButtons({ targetType, targetId, upvotes, downvotes, voteScore, isAI
|
|||||||
}, [isAuthenticated, targetType, targetId, fetched]);
|
}, [isAuthenticated, targetType, targetId, fetched]);
|
||||||
|
|
||||||
const handleVote = async (value: 1 | -1) => {
|
const handleVote = async (value: 1 | -1) => {
|
||||||
if (!isAuthenticated || loading || isAI) return;
|
if (!isAuthenticated || loading) return;
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const res = await fetch('/api/forum/votes', {
|
const res = await fetch('/api/forum/votes', {
|
||||||
@@ -140,8 +132,8 @@ function VoteButtons({ targetType, targetId, upvotes, downvotes, voteScore, isAI
|
|||||||
{/* Upvote */}
|
{/* Upvote */}
|
||||||
<button
|
<button
|
||||||
onClick={() => handleVote(1)}
|
onClick={() => handleVote(1)}
|
||||||
disabled={loading || !isAuthenticated || !!isAI}
|
disabled={loading || !isAuthenticated}
|
||||||
title={!isAuthenticated ? 'Sign in to vote' : isAI ? 'Cannot vote on AI responses' : 'Upvote'}
|
title={!isAuthenticated ? 'Sign in to vote' : 'Upvote'}
|
||||||
className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-body font-semibold transition-colors border ${
|
className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-body font-semibold transition-colors border ${
|
||||||
currentVote === 1
|
currentVote === 1
|
||||||
? 'bg-[#1D4ED8]/20 border-[#1D4ED8] text-[#1D4ED8]'
|
? 'bg-[#1D4ED8]/20 border-[#1D4ED8] text-[#1D4ED8]'
|
||||||
@@ -163,8 +155,8 @@ function VoteButtons({ targetType, targetId, upvotes, downvotes, voteScore, isAI
|
|||||||
{/* Downvote */}
|
{/* Downvote */}
|
||||||
<button
|
<button
|
||||||
onClick={() => handleVote(-1)}
|
onClick={() => handleVote(-1)}
|
||||||
disabled={loading || !isAuthenticated || !!isAI}
|
disabled={loading || !isAuthenticated}
|
||||||
title={!isAuthenticated ? 'Sign in to vote' : isAI ? 'Cannot vote on AI responses' : 'Downvote'}
|
title={!isAuthenticated ? 'Sign in to vote' : 'Downvote'}
|
||||||
className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-body font-semibold transition-colors border ${
|
className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-body font-semibold transition-colors border ${
|
||||||
currentVote === -1
|
currentVote === -1
|
||||||
? 'bg-red-900/30 border-red-700 text-red-400' :'bg-transparent border-[#DCE6F2] text-[#666] hover:border-red-700 hover:text-red-400'
|
? 'bg-red-900/30 border-red-700 text-red-400' :'bg-transparent border-[#DCE6F2] text-[#666] hover:border-red-700 hover:text-red-400'
|
||||||
@@ -202,11 +194,6 @@ export default function ForumThreadPage() {
|
|||||||
const [submitting, setSubmitting] = useState(false);
|
const [submitting, setSubmitting] = useState(false);
|
||||||
const [replyError, setReplyError] = useState<string | null>(null);
|
const [replyError, setReplyError] = useState<string | null>(null);
|
||||||
|
|
||||||
// AI assistant
|
|
||||||
const [aiQuestion, setAiQuestion] = useState('');
|
|
||||||
const [aiLoading, setAiLoading] = useState(false);
|
|
||||||
const [aiError, setAiError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const repliesEndRef = useRef<HTMLDivElement>(null);
|
const repliesEndRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -265,37 +252,6 @@ export default function ForumThreadPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleAiAssist = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!aiQuestion.trim() || !thread) return;
|
|
||||||
setAiLoading(true);
|
|
||||||
setAiError(null);
|
|
||||||
try {
|
|
||||||
const res = await fetch('/api/forum/ai-assist', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({
|
|
||||||
thread_id: threadId,
|
|
||||||
question: aiQuestion,
|
|
||||||
thread_title: thread.title,
|
|
||||||
thread_body: thread.body,
|
|
||||||
replies: replies.slice(-5),
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
const data = await res.json();
|
|
||||||
if (data.error) throw new Error(data.error);
|
|
||||||
if (data.reply) {
|
|
||||||
setReplies(prev => [...prev, data.reply]);
|
|
||||||
setAiQuestion('');
|
|
||||||
setTimeout(() => repliesEndRef.current?.scrollIntoView({ behavior: 'smooth' }), 100);
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
|
||||||
setAiError(err.message || 'AI assistant unavailable. Please try again.');
|
|
||||||
} finally {
|
|
||||||
setAiLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -363,7 +319,7 @@ export default function ForumThreadPage() {
|
|||||||
{/* Original Post */}
|
{/* Original Post */}
|
||||||
<div className="bg-[#FFFFFF] border border-[#DCE6F2] rounded-lg p-5 mb-4">
|
<div className="bg-[#FFFFFF] border border-[#DCE6F2] rounded-lg p-5 mb-4">
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<Avatar name={thread.author_name} isAI={false} />
|
<Avatar name={thread.author_name} />
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<div className="flex items-center gap-2 mb-2">
|
<div className="flex items-center gap-2 mb-2">
|
||||||
<Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-white font-body font-semibold text-sm hover:text-[#1D4ED8] hover:underline">{thread.author_name}</Link>
|
<Link href={`/forum/user/${encodeURIComponent(thread.author_name)}`} className="text-white font-body font-semibold text-sm hover:text-[#1D4ED8] hover:underline">{thread.author_name}</Link>
|
||||||
@@ -392,23 +348,12 @@ export default function ForumThreadPage() {
|
|||||||
<div className="space-y-3 mb-6">
|
<div className="space-y-3 mb-6">
|
||||||
{replies.map((reply, idx) => (
|
{replies.map((reply, idx) => (
|
||||||
<React.Fragment key={reply.id}>
|
<React.Fragment key={reply.id}>
|
||||||
<div
|
<div className="border rounded-lg p-5 bg-[#FFFFFF] border-[#DCE6F2]">
|
||||||
className={`border rounded-lg p-5 ${
|
|
||||||
reply.is_ai_response
|
|
||||||
? 'bg-[#0d1f35] border-[#DCE6F2]'
|
|
||||||
: 'bg-[#FFFFFF] border-[#DCE6F2]'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<Avatar name={reply.author_name} isAI={reply.is_ai_response} />
|
<Avatar name={reply.author_name} />
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<div className="flex items-center gap-2 mb-2 flex-wrap">
|
<div className="flex items-center gap-2 mb-2 flex-wrap">
|
||||||
<Link href={`/forum/user/${encodeURIComponent(reply.author_name)}`} className="text-white font-body font-semibold text-sm hover:text-[#1D4ED8] hover:underline">{reply.author_name}</Link>
|
<Link href={`/forum/user/${encodeURIComponent(reply.author_name)}`} className="text-white font-body font-semibold text-sm hover:text-[#1D4ED8] hover:underline">{reply.author_name}</Link>
|
||||||
{reply.is_ai_response && (
|
|
||||||
<span className="text-xs bg-[#1D4ED8]/20 text-[#1D4ED8] border border-[#1D4ED8]/30 px-2 py-0.5 rounded font-body font-semibold">
|
|
||||||
AI Assistant
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<span className="text-[#555] font-body text-xs">·</span>
|
<span className="text-[#555] font-body text-xs">·</span>
|
||||||
<span className="text-[#555] font-body text-xs">#{idx + 1}</span>
|
<span className="text-[#555] font-body text-xs">#{idx + 1}</span>
|
||||||
<span className="text-[#555] font-body text-xs">·</span>
|
<span className="text-[#555] font-body text-xs">·</span>
|
||||||
@@ -423,7 +368,6 @@ export default function ForumThreadPage() {
|
|||||||
upvotes={reply.upvotes ?? 0}
|
upvotes={reply.upvotes ?? 0}
|
||||||
downvotes={reply.downvotes ?? 0}
|
downvotes={reply.downvotes ?? 0}
|
||||||
voteScore={reply.vote_score ?? 0}
|
voteScore={reply.vote_score ?? 0}
|
||||||
isAI={reply.is_ai_response}
|
|
||||||
isAuthenticated={isAuthenticated}
|
isAuthenticated={isAuthenticated}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -440,50 +384,6 @@ export default function ForumThreadPage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* AI Assistant Panel */}
|
|
||||||
<div className="bg-[#0d1f35] border border-[#DCE6F2] rounded-lg p-5 mb-6">
|
|
||||||
<div className="flex items-center gap-2 mb-3">
|
|
||||||
<div className="w-7 h-7 rounded-full bg-[#DCE6F2] border border-[#1D4ED8] flex items-center justify-center">
|
|
||||||
<span className="text-[#1D4ED8] text-xs font-bold">AI</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-white font-body font-semibold text-sm">AV Beat AI Assistant</span>
|
|
||||||
<span className="ml-2 text-xs bg-[#1D4ED8]/20 text-[#1D4ED8] border border-[#1D4ED8]/30 px-2 py-0.5 rounded font-body">AI — Not a human</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="text-[#7a9ab8] font-body text-xs mb-3">
|
|
||||||
Ask the AI assistant a question related to this thread. Responses are generated by AI and should be verified for critical decisions.
|
|
||||||
</p>
|
|
||||||
<form onSubmit={handleAiAssist} className="flex gap-2">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Ask a question about this topic..."
|
|
||||||
value={aiQuestion}
|
|
||||||
onChange={e => setAiQuestion(e.target.value)}
|
|
||||||
disabled={aiLoading}
|
|
||||||
className="flex-1 bg-[#111] border border-[#2a3a50] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#3a5a7a] focus:outline-none focus:border-[#1D4ED8] disabled:opacity-50"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={aiLoading || !aiQuestion.trim()}
|
|
||||||
className="bg-[#1D4ED8] hover:bg-[#1E3A8A] disabled:opacity-50 text-white font-body font-semibold text-sm px-4 py-2 rounded-lg transition-colors flex-shrink-0"
|
|
||||||
>
|
|
||||||
{aiLoading ? (
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<svg className="animate-spin w-3 h-3" fill="none" viewBox="0 0 24 24">
|
|
||||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
||||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
|
||||||
</svg>
|
|
||||||
Thinking...
|
|
||||||
</span>
|
|
||||||
) : 'Ask AI'}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
{aiError && (
|
|
||||||
<p className="text-red-400 font-body text-xs mt-2">{aiError}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Reply Form — auth-gated */}
|
{/* Reply Form — auth-gated */}
|
||||||
{thread.status !== 'closed' && isAuthenticated && (
|
{thread.status !== 'closed' && isAuthenticated && (
|
||||||
<div className="bg-[#FFFFFF] border border-[#DCE6F2] rounded-lg p-5">
|
<div className="bg-[#FFFFFF] border border-[#DCE6F2] rounded-lg p-5">
|
||||||
|
|||||||
Reference in New Issue
Block a user