feat: add Materi section + AI agent RAG to GMW business flow

Backend: - New materi module: schema (materi_documents table), repository, service - ragClient: semantic + keyword search over materi docs, plus Discord archive via Qdrant, then LLM answer generation (RAG) - Wire materiRouter into appRouter (list/detail/create/update/delete/chat) Frontend: - New types (MateriDocument, CreateMateriInput, RAG chat shapes) - API client (SSR HTTP RPCLink + browser WS RPCLink) - Routes: /materi list, /materi/[id] detail, /materi/new form, /materi/chat RAG chat UI - Sidebar nav item 'Materi' Migration: scripts/add-materi-documents.sql (CREATE TABLE IF NOT EXISTS)
2026-08-20 15:57:04 +07:00
parent 6f20b0f146
commit 0aa893ab7d
16 changed files with 1228 additions and 0 deletions
@@ -0,0 +1,59 @@
+import { notFound } from "next/navigation";
+import { PageTransition, MarkdownLite } from "@/components/shared";
+import { Button, Badge } from "@/components/primitives";
+import { Trash2, Pencil } from "lucide-react";
+import { getMateriSSR } from "@/lib/api/materi";
+
+export const dynamic = "force-dynamic";
+
+export default async function MateriDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const doc = await getMateriSSR(id);
+
+  if (!doc) {
+    notFound();
+  }
+
+  return (
+    <PageTransition>
+      <article className="prose dark:prose-invert max-w-none">
+        <div className="flex items-start justify-between mb-6">
+          <div>
+            <h1>{doc.title}</h1>
+            {doc.description && (
+              <p className="text-muted-foreground">{doc.description}</p>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <Button variant="ghost" size="sm" asChild>
+              <a href={"/materi/" + doc.id + "/edit"}>
+                <Pencil className="h-4 w-4" />
+              </a>
+            </Button>
+            <Button variant="ghost" size="sm" asChild>
+              <a href={"/materi/new?duplicate=" + doc.id}>
+                <Trash2 className="h-4 w-4" />
+              </a>
+            </Button>
+          </div>
+        </div>
+
+        <div className="mb-6 flex flex-wrap gap-2">
+          <Badge tone="neutral">{doc.category}</Badge>
+          {doc.tags.map((tag) => (
+            <Badge key={tag} tone="neutral">
+              {tag}
+            </Badge>
+          ))}
+        </div>
+
+        {/* MarkdownLite component renders content safely (no dangerouslySetInnerHTML) */}
+        <MarkdownLite content={doc.content} />
+      </article>
+    </PageTransition>
+  );
+}
@@ -0,0 +1,170 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { PageTransition } from "@/components/shared";
+import { Button, Input, Textarea, GlassCard } from "@/components/primitives";
+import { Send, Bot, User, Loader2, ExternalLink } from "lucide-react";
+import { searchMateri } from "@/lib/api/materi";
+import type { MateriRagChatMessage, MateriRagChatResult } from "@/lib/types/materi";
+
+export const dynamic = "force-dynamic";
+
+export default function MateriChatPage() {
+  const [messages, setMessages] = useState<MateriRagChatMessage[]>([]);
+  const [input, setInput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [sources, setSources] = useState<MateriRagChatResult["sources"]>([]);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  async function handleSend() {
+    if (!input.trim() || isLoading) return;
+
+    const userMsg: MateriRagChatMessage = { role: "user", content: input.trim() };
+    const newMessages = [...messages, userMsg];
+    setMessages(newMessages);
+    setInput("");
+    setIsLoading(true);
+    setSources([]);
+
+    try {
+      const result = await searchMateri(userMsg.content, newMessages, undefined);
+      const assistantMsg: MateriRagChatMessage = { role: "assistant", content: result.answer };
+      setMessages([...newMessages, assistantMsg]);
+      setSources(result.sources);
+    } catch {
+      const errorMsg: MateriRagChatMessage = {
+        role: "assistant",
+        content: "Maaf, ada kesalahan. Silakan coba lagi.",
+      };
+      setMessages([...newMessages, errorMsg]);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <PageTransition>
+      <div className="flex flex-col h-[calc(100vh-200px)]">
+        <div className="mb-4">
+          <h1 className="text-3xl font-bold">AI Chat — Materi &amp; RAG</h1>
+          <p className="text-muted-foreground mt-1">
+            Tanya tentang materi komunitas. AI akan mencari referensi dari
+            dokumen materi dan arsip Discord.
+          </p>
+        </div>
+
+        <div className="flex-1 overflow-y-auto space-y-4">
+          {messages.length === 0 ? (
+            <div className="text-center py-12 text-muted-foreground">
+              <Bot className="mx-auto h-12 w-12 mb-4 opacity-50" />
+              <p>Silakan tanyakan sesuatu tentang materi komunitas.</p>
+              <p className="text-xs mt-2">
+                Contoh: "Apa itu screenshare audio di GMW?" atau
+                "Cara pakai voice recording"
+              </p>
+            </div>
+          ) : (
+            messages.map((msg, i) => (
+              <div
+                key={i}
+                className={
+                  "flex gap-3 " +
+                  (msg.role === "user" ? "justify-end" : "justify-start")
+                }
+              >
+                <div
+                  className={
+                    "max-w-[80%] rounded-lg p-4 " +
+                    (msg.role === "user"
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-muted/50")
+                  }
+                >
+                  <div className="flex items-center gap-2 mb-2">
+                    {msg.role === "user" ? (
+                      <User className="h-4 w-4" />
+                    ) : (
+                      <Bot className="h-4 w-4" />
+                    )}
+                    <span className="text-xs font-medium">
+                      {msg.role === "user" ? "Anda" : "AI Agent"}
+                    </span>
+                  </div>
+                  <div className="whitespace-pre-wrap text-sm">{msg.content}</div>
+                </div>
+              </div>
+            ))
+          )}
+
+          {isLoading && (
+            <div className="flex gap-3 justify-start">
+              <div className="bg-muted/50 rounded-lg p-4 max-w-[80%]">
+                <div className="flex items-center gap-2">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <span className="text-sm">AI sedang mencari di materi...</span>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* Sources from last AI response */}
+        {sources.length > 0 && (
+          <GlassCard className="p-4 mb-4">
+            <p className="text-xs font-medium text-muted-foreground mb-2">
+              Sumber:
+            </p>
+            <div className="space-y-1">
+              {sources.map((src, i) => (
+                <div key={i} className="text-sm">
+                  <span className="font-medium">{src.title}</span>
+                  <span className="text-xs text-muted-foreground">
+                    {" "}
+                    (skor: {src.score.toFixed(2)})
+                  </span>
+                  <p className="text-xs text-muted-foreground line-clamp-2 mt-1">
+                    {src.excerpt}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </GlassCard>
+        )}
+
+        {/* Input */}
+        <div className="flex gap-2">
+          <Textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Tanya tentang materi..."
+            disabled={isLoading}
+            className="flex-1"
+            rows={2}
+          />
+          <Button onClick={handleSend} disabled={isLoading || !input.trim()} size="icon">
+            <Send className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div className="mt-2 text-xs text-muted-foreground">
+          <ExternalLink className="h-3 w-3 inline mr-1" />
+          AI mengacu pada materi dan arsip Discord. Jawaban mungkin tidak 100% akurat.
+        </div>
+      </div>
+    </PageTransition>
+  );
+}
@@ -0,0 +1,133 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { PageTransition } from "@/components/shared";
+import { Button, Input, Textarea, GlassCard } from "@/components/primitives";
+import { Save, ArrowLeft } from "lucide-react";
+import { createMateri } from "@/lib/api/materi";
+import type { CreateMateriInput } from "@/lib/types/materi";
+
+export const dynamic = "force-dynamic";
+
+export default function MateriNewPage() {
+  const router = useRouter();
+  const [form, setForm] = useState<CreateMateriInput>({
+    title: "",
+    description: "",
+    content: "",
+    category: "general",
+    tags: [],
+    isPublic: true,
+  });
+  const [tagsInput, setTagsInput] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  function update<K extends keyof CreateMateriInput>(key: K, value: CreateMateriInput[K]) {
+    setForm((f) => ({ ...f, [key]: value }));
+  }
+
+  async function handleSubmit() {
+    if (!form.title.trim() || !form.content.trim()) {
+      setError("Judul dan konten wajib diisi.");
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      const tags = tagsInput
+        .split(",")
+        .map((t) => t.trim())
+        .filter(Boolean);
+      const doc = await createMateri({ ...form, tags });
+      router.push("/materi/" + doc.id);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Gagal menyimpan materi.");
+      setSaving(false);
+    }
+  }
+
+  return (
+    <PageTransition>
+      <div className="max-w-3xl mx-auto space-y-6">
+        <div className="flex items-center gap-3">
+          <Button variant="ghost" size="sm" onClick={() => router.back()}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <h1 className="text-3xl font-bold">Buat Materi Baru</h1>
+        </div>
+
+        {error && (
+          <GlassCard className="p-4 border border-red-500/30 text-red-400 text-sm">
+            {error}
+          </GlassCard>
+        )}
+
+        <GlassCard className="p-6 space-y-4">
+          <div>
+            <label className="text-sm font-medium mb-1 block">Judul *</label>
+            <Input
+              value={form.title}
+              onChange={(e) => update("title", e.target.value)}
+              placeholder="Judul materi"
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium mb-1 block">Deskripsi</label>
+            <Input
+              value={form.description ?? ""}
+              onChange={(e) => update("description", e.target.value)}
+              placeholder="Deskripsi singkat"
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium mb-1 block">Kategori</label>
+            <Input
+              value={form.category}
+              onChange={(e) => update("category", e.target.value)}
+              placeholder="general"
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium mb-1 block">Tags (pisahkan dengan koma)</label>
+            <Input
+              value={tagsInput}
+              onChange={(e) => setTagsInput(e.target.value)}
+              placeholder="wibu, discord, moderation"
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium mb-1 block">Konten *</label>
+            <Textarea
+              value={form.content}
+              onChange={(e) => update("content", e.target.value)}
+              placeholder="Tulis materi di sini..."
+              rows={12}
+            />
+          </div>
+
+          <label className="flex items-center gap-2 text-sm">
+            <input
+              type="checkbox"
+              checked={form.isPublic}
+              onChange={(e) => update("isPublic", e.target.checked)}
+            />
+            Publik (terlihat semua orang)
+          </label>
+
+          <div className="flex justify-end">
+            <Button onClick={handleSubmit} disabled={saving}>
+              <Save className="h-4 w-4 mr-2" />
+              {saving ? "Menyimpan..." : "Simpan"}
+            </Button>
+          </div>
+        </GlassCard>
+      </div>
+    </PageTransition>
+  );
+}
@@ -0,0 +1,111 @@
+import { PageTransition } from "@/components/shared";
+import { Badge, Button, GlassCard, Input } from "@/components/primitives";
+import { Plus, BookOpen, MessageSquare, Search } from "lucide-react";
+import { listMateriSSR } from "@/lib/api/materi";
+import type { MateriDocument } from "@/lib/types/materi";
+import Link from "next/link";
+
+export const dynamic = "force-dynamic";
+
+async function loadMateri(search?: string): Promise<MateriDocument[]> {
+  try {
+    return await listMateriSSR(50, search);
+  } catch {
+    return [];
+  }
+}
+
+function MateriGrid({ materi }: { materi: MateriDocument[] }) {
+  if (materi.length === 0) {
+    return (
+      <div className="text-center py-12 text-muted-foreground">
+        <BookOpen className="mx-auto h-12 w-12 mb-4 opacity-50" />
+        <p>Belum ada materi. Jadilah yang pertama membuat materi!</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {materi.map((doc) => (
+        <Link key={doc.id} href={"/materi/" + doc.id}>
+          <GlassCard className="h-full cursor-pointer hover:shadow-lg transition-shadow">
+            <div className="p-6">
+              <h3 className="font-bold text-lg mb-2 line-clamp-2">{doc.title}</h3>
+              {doc.description && (
+                <p className="text-sm text-muted-foreground mb-3 line-clamp-3">
+                  {doc.description}
+                </p>
+              )}
+              <div className="flex flex-wrap gap-1 mb-3">
+                <Badge tone="neutral" className="text-xs">
+                  {doc.category}
+                </Badge>
+                {doc.tags.slice(0, 3).map((tag) => (
+                  <Badge key={tag} tone="neutral" className="text-xs">
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+              <div className="flex items-center justify-between text-xs text-muted-foreground">
+                <span>{doc.view_count} views</span>
+                <span>{new Date(doc.created_at).toLocaleDateString()}</span>
+              </div>
+            </div>
+          </GlassCard>
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+export default async function MateriPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ search?: string }>;
+}) {
+  const params = await searchParams;
+  const materi = await loadMateri(params.search);
+
+  return (
+    <PageTransition>
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold">Materi &amp; Bahan Belajar</h1>
+            <p className="text-muted-foreground mt-1">
+              Dokumen, panduan, dan bahan belajar komunitas beserta AI agent RAG
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Link href="/materi/chat">
+              <Button variant="outline" size="sm">
+                <MessageSquare className="h-4 w-4 mr-2" />
+                AI Chat
+              </Button>
+            </Link>
+            <Button size="sm" asChild>
+              <Link href={"/materi/new"}>
+                <Plus className="h-4 w-4 mr-2" />
+                Buat Materi
+              </Link>
+            </Button>
+          </div>
+        </div>
+
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Cari materi..."
+            className="pl-10"
+            name="search"
+            defaultValue={params.search}
+          />
+        </div>
+
+        <MateriGrid materi={materi} />
+      </div>
+    </PageTransition>
+  );
+}
@@ -0,0 +1,65 @@
+// Materi API client — talks to backend /trpc materi router
+import { createORPCClient } from "@orpc/client";
+import { RPCLink } from "@orpc/client/fetch";
+import { orpc } from "@/lib/orpc/client";
+import type { MateriDocument, CreateMateriInput, MateriRagChatResult, MateriRagChatMessage } from "@/lib/types/materi";
+import type { ORPCClient } from "@/lib/orpc/types";
+
+const BACKEND_URL =
+  process.env.GMW_BACKEND_URL?.replace(/\/+$/, "") || "http://127.0.0.1:4001";
+
+let _serverClient: ORPCClient | null = null;
+function serverOrpc(): ORPCClient {
+  if (!_serverClient) {
+    const link = new RPCLink({
+      url: BACKEND_URL + "/trpc",
+      fetch(url, init) {
+        return fetch(url, { ...init, cache: "no-store" });
+      },
+    });
+    _serverClient = createORPCClient(link) as unknown as ORPCClient;
+  }
+  return _serverClient;
+}
+
+// Server-side (SSR seed) — uses the HTTP RPCLink via oRPC
+export async function listMateriSSR(limit = 50, search?: string): Promise<MateriDocument[]> {
+  return (serverOrpc() as any).materi.list({
+    limit,
+    search,
+  }) as unknown as Promise<MateriDocument[]>;
+}
+
+export async function getMateriSSR(id: string): Promise<MateriDocument | null> {
+  return (serverOrpc() as any).materi.detail({
+    id,
+  }) as unknown as Promise<MateriDocument | null>;
+}
+
+// Client-side — browser WebSocket RPCLink (orpc is "use client")
+export async function createMateri(input: CreateMateriInput): Promise<MateriDocument> {
+  return orpc.materi.create(input) as unknown as Promise<MateriDocument>;
+}
+
+export async function updateMateri(
+  id: string,
+  input: Partial<CreateMateriInput>,
+): Promise<MateriDocument | null> {
+  return orpc.materi.update({ id, ...input }) as unknown as Promise<MateriDocument | null>;
+}
+
+export async function deleteMateri(id: string): Promise<boolean> {
+  return orpc.materi.delete({ id }) as unknown as Promise<boolean>;
+}
+
+export async function searchMateri(
+  query: string,
+  history: MateriRagChatMessage[] = [],
+  materiId?: string,
+): Promise<MateriRagChatResult> {
+  return orpc.materi.chat({
+    message: query,
+    history,
+    materiId,
+  }) as unknown as Promise<MateriRagChatResult>;
+}
@@ -1,4 +1,5 @@
 import {
+  BookOpen,
  Headphones,
  LayoutDashboard,
  type LucideIcon,
@@ -63,6 +64,12 @@ export const navItems: NavItem[] = [
    icon: Search,
    matchPrefix: "/analysis",
  },
+  {
+    href: "/materi",
+    label: "Materi",
+    icon: BookOpen,
+    matchPrefix: "/materi",
+  },
 ];

 /**
@@ -1,6 +1,7 @@
 export * from "./dashboard";
 export * from "./guild";
 export * from "./knowledge";
+export * from "./materi";
 export * from "./media";
 export * from "./message";
 export * from "./moderation";
@@ -0,0 +1,41 @@
+export interface MateriDocument {
+  id: string;
+  title: string;
+  description: string | null;
+  content: string;
+  category: string;
+  tags: string[];
+  owner_user_id: string;
+  guild_id: string | null;
+  channel_id: string | null;
+  is_public: boolean;
+  view_count: number;
+  created_at: number;
+  updated_at: number;
+}
+
+export interface CreateMateriInput {
+  title: string;
+  description?: string;
+  content: string;
+  category: string;
+  tags: string[];
+  guildId?: string;
+  channelId?: string;
+  isPublic: boolean;
+}
+
+export interface MateriRagChatMessage {
+  role: "user" | "assistant";
+  content: string;
+}
+
+export interface MateriRagChatResult {
+  answer: string;
+  sources: Array<{
+    id: string;
+    title: string;
+    score: number;
+    excerpt: string;
+  }>;
+}