larkup 0.1.14

package/components/chat/chat-workspace.tsx

@@ -0,0 +1,348 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+import {
+  ArrowUp,
+  SquarePen,
+  RotateCcw,
+  TriangleAlert,
+  Loader2,
+  ChevronDown,
+  MessageCircle,
+} from "lucide-react";
+import useSWR from "swr";
+import { MessageItem } from "@/components/chat/message-item";
+import { ChatSettingsModal } from "@/components/chat/chat-settings-modal";
+import { useWorkspace } from "@/components/workspace/workspace-provider";
+import { cn } from "@/lib/utils";
+import { PROVIDER_META, ProviderIcon } from "@/components/ui/provider-icon";
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
+interface ChatStatus {
+  ready: boolean;
+  indexed: boolean;
+  blockers: string[];
+  provider: string;
+  chatModelId: string;
+  availableModels: { id: string; label: string; provider: string }[];
+  suggestions: string[];
+}
+
+export function ChatWorkspace() {
+  const { activeServer } = useWorkspace();
+  const serverId = activeServer?.id ?? null;
+
+  const statusKey = serverId
+    ? `/api/chat/status?serverId=${encodeURIComponent(serverId)}`
+    : "/api/chat/status";
+  const { data: status, isLoading: statusLoading } = useSWR<ChatStatus>(
+    statusKey,
+    fetcher,
+    { refreshInterval: 10000 },
+  );
+
+  const [selectedModel, setSelectedModel] = useState<string>("");
+  const [showModelSelect, setShowModelSelect] = useState(false);
+  const [input, setInput] = useState("");
+
+  // Update selected model when status loads
+  useEffect(() => {
+    if (status?.chatModelId && !selectedModel) {
+      setSelectedModel(status.chatModelId);
+    }
+  }, [status?.chatModelId, selectedModel]);
+
+  // Fetch suggestions if missing
+  useEffect(() => {
+    if (
+      status?.ready &&
+      status.suggestions &&
+      status.suggestions.length === 0
+    ) {
+      const url = serverId
+        ? `/api/chat/suggestions?serverId=${encodeURIComponent(serverId)}`
+        : "/api/chat/suggestions";
+      fetch(url, { method: "POST" });
+    }
+  }, [status?.ready, status?.suggestions, serverId]);
+
+  const {
+    messages,
+    sendMessage,
+    status: chatStatus,
+    setMessages,
+    error,
+    regenerate,
+  } = useChat({
+    transport: new DefaultChatTransport({
+      api: "/api/chat",
+      body: {
+        serverId,
+        chatModelId: selectedModel || undefined,
+      },
+    }),
+  });
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const isBusy = chatStatus === "submitted" || chatStatus === "streaming";
+
+  useEffect(() => {
+    scrollRef.current?.scrollTo({
+      top: scrollRef.current.scrollHeight,
+      behavior: "smooth",
+    });
+  }, [messages, chatStatus]);
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    const text = input.trim();
+    if (!text || isBusy) return;
+    sendMessage({ text });
+    setInput("");
+  }
+
+  function newChat() {
+    setMessages([]);
+    setInput("");
+  }
+
+  const isEmpty = messages.length === 0;
+  const ready = status?.ready ?? false;
+
+  if (statusLoading) {
+    return (
+      <div className="flex flex-1 items-center justify-center">
+        <Loader2 className="size-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      {/* Header bar */}
+      <div className="flex items-center justify-between border-b border-border px-6 pb-3">
+        <div className="flex items-center gap-3">
+          {/* We moved model selector to the right */}
+        </div>
+        <div className="flex items-center gap-2">
+          {/* Model selector */}
+          {status?.availableModels && status.availableModels.length > 0 && (
+            <div className="relative">
+              <button
+                type="button"
+                onClick={() => setShowModelSelect((o) => !o)}
+                className="flex w-[250px] justify-between items-center gap-1.5 rounded-lg border border-border bg-white px-3 py-1.5 text-xs text-foreground transition hover:bg-muted"
+              >
+                {status.availableModels.find((m) => m.id === selectedModel)
+                  ?.label ||
+                  selectedModel ||
+                  "Select model"}
+                <ChevronDown className="size-3 text-muted-foreground" />
+              </button>
+              {showModelSelect && (
+                <>
+                  <div
+                    className="fixed inset-0 z-40"
+                    onClick={() => setShowModelSelect(false)}
+                  />
+                  <div className="absolute right-0 top-full z-50 mt-1 max-h-64 min-w-[250px] overflow-y-auto rounded-lg border border-border bg-card p-1 shadow-lg [&::-webkit-scrollbar]:hidden">
+                    {status.availableModels.map((m) => (
+                      <button
+                        key={m.id}
+                        type="button"
+                        onClick={() => {
+                          setSelectedModel(m.id);
+                          setShowModelSelect(false);
+                        }}
+                        className={cn(
+                          "flex w-full gap-3 items-center justify-between rounded-md px-3 py-2 text-left text-xs transition",
+                          m.id === selectedModel
+                            ? "bg-primary/10 text-primary font-medium"
+                            : "text-foreground hover:bg-muted",
+                        )}
+                      >
+                        <span>{m.label}</span>
+                        {PROVIDER_META[
+                          m.provider as keyof typeof PROVIDER_META
+                        ] ? (
+                          <ProviderIcon
+                            src={
+                              PROVIDER_META[
+                                m.provider as keyof typeof PROVIDER_META
+                              ].iconSrc
+                            }
+                            alt={m.provider}
+                            pillBg={
+                              PROVIDER_META[
+                                m.provider as keyof typeof PROVIDER_META
+                              ].pillBg
+                            }
+                            size={16}
+                          />
+                        ) : (
+                          <span className="text-[10px] uppercase text-muted-foreground/60">
+                            {m.provider}
+                          </span>
+                        )}
+                      </button>
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
+          )}
+
+          <div className="h-4 w-px bg-border mx-1" />
+
+          <button
+            type="button"
+            onClick={newChat}
+            title="New chat"
+            className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition hover:bg-secondary hover:text-foreground"
+          >
+            <SquarePen className="h-[16px] w-[16px]" />
+          </button>
+          <ChatSettingsModal />
+        </div>
+      </div>
+
+      {/* Messages area */}
+      <div
+        ref={scrollRef}
+        className="min-h-0 flex-1 overflow-y-auto [&::-webkit-scrollbar]:hidden"
+      >
+        <div className="mx-auto w-full max-w-3xl px-4 py-6 sm:px-6">
+          {!ready ? (
+            <div className="flex flex-col items-center justify-center gap-3 pt-[18vh] text-center">
+              <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
+                <MessageCircle className="size-7" />
+              </div>
+              <h1 className="text-xl font-semibold tracking-tight text-foreground">
+                Chat not ready yet
+              </h1>
+              <p className="max-w-md text-sm leading-relaxed text-muted-foreground">
+                {status?.blockers?.join(" ") ||
+                  "Set an API key in Settings to start chatting."}
+              </p>
+            </div>
+          ) : isEmpty ? (
+            <div className="flex flex-col items-center justify-center gap-3 pt-[18vh] text-center">
+              <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <MessageCircle className="size-7" />
+              </div>
+              <h1 className="text-xl font-semibold tracking-tight text-foreground text-balance">
+                Chat with your knowledge base
+              </h1>
+              <p className="max-w-md text-sm leading-relaxed text-muted-foreground text-pretty">
+                Ask questions and get AI-powered answers grounded in your
+                indexed documents.
+              </p>
+              {!status?.indexed && (
+                <div className="mt-2 flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
+                  <TriangleAlert className="size-3.5 shrink-0" />
+                  No documents indexed yet, add documents in the Docs page. The
+                  agent can still answer general questions.
+                </div>
+              )}
+              <div className="mt-4 flex flex-wrap justify-center gap-2">
+                {status?.suggestions && status.suggestions.length > 0 ? (
+                  status.suggestions.map((s) => (
+                    <button
+                      key={s}
+                      type="button"
+                      onClick={() => {
+                        sendMessage({ text: s });
+                      }}
+                      className="rounded-full border border-border bg-card px-3.5 py-1.5 text-xs text-foreground transition hover:bg-secondary"
+                    >
+                      {s}
+                    </button>
+                  ))
+                ) : (
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                    {/* <Loader2 className="size-3 animate-spin" /> Generating
+                    suggestions... */}
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="flex flex-col gap-6">
+              {messages.map((m, idx) => (
+                <MessageItem
+                  key={m.id}
+                  message={m}
+                  isLast={idx === messages.length - 1}
+                  isStreaming={chatStatus === "streaming"}
+                />
+              ))}
+              {chatStatus === "submitted" ? (
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <span className="h-2 w-2 animate-pulse rounded-full bg-foreground" />
+                  Thinking…
+                </div>
+              ) : null}
+              {error ? (
+                <div className="flex items-start gap-3 rounded-xl border border-destructive/30 bg-destructive/5 px-4 py-3">
+                  <TriangleAlert className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
+                  <div className="flex-1">
+                    <p className="text-sm text-foreground">
+                      {error.message ||
+                        "Something went wrong while generating a response."}
+                    </p>
+                    <button
+                      type="button"
+                      onClick={() => regenerate()}
+                      className="mt-2 inline-flex items-center gap-1.5 rounded-lg border border-border bg-card px-2.5 py-1.5 text-xs font-medium text-foreground transition hover:bg-secondary"
+                    >
+                      <RotateCcw className="h-3.5 w-3.5" />
+                      Try again
+                    </button>
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Input area */}
+      {ready && (
+        <div className="relative z-10000 px-4 pb-5 pt-3 sm:px-6">
+          <form onSubmit={handleSubmit} className="mx-auto w-full max-w-3xl">
+            <div className="flex items-end gap-2 rounded-2xl border border-border bg-card p-2 transition focus-within:ring-1 focus-within:ring-ring">
+              <textarea
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    handleSubmit(e);
+                  }
+                }}
+                rows={2}
+                disabled={!ready}
+                placeholder="Ask about your knowledge base…"
+                className="max-h-40 flex-1 resize-none bg-transparent px-2 py-1.5 text-sm text-foreground outline-none placeholder:text-muted-foreground"
+              />
+              <button
+                type="submit"
+                disabled={!input.trim() || isBusy}
+                className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground transition hover:opacity-90 disabled:opacity-40"
+              >
+                {isBusy ? (
+                  <Loader2 className="h-[18px] w-[18px] animate-spin" />
+                ) : (
+                  <ArrowUp className="h-[18px] w-[18px]" />
+                )}
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/chat/knowledge-base-result.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, Loader2, Database } from "lucide-react";
+
+interface KBHit {
+  title: string;
+  url: string;
+  score: number;
+  text: string;
+}
+
+/**
+ * Renders knowledge base retrieval results from tool-searchKnowledgeBase parts.
+ *
+ * UIMessage parts for tools look like:
+ *   { type: "tool-searchKnowledgeBase", state: "input-streaming" | "input-available" | "output", input: { query }, output: { query, hits } }
+ */
+export function KnowledgeBaseResult({
+  parts,
+  isShimmering,
+}: {
+  parts: any[];
+  isShimmering?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const isRunning = parts.some(
+    (part) =>
+      part.state === "input-streaming" || part.state === "input-available",
+  );
+  const hits: KBHit[] = parts.flatMap((part) => part.output?.hits ?? []);
+  const queries = parts.map((part) => part.input?.query).filter(Boolean);
+
+  return (
+    <div className="relative overflow-hidden rounded-xl border border-border bg-card">
+      {isShimmering && (
+        <div className="pointer-events-none absolute inset-0 z-10 animate-pulse bg-linear-to-r from-transparent via-foreground/5 to-transparent" />
+      )}
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full items-center gap-3 px-3.5 py-3 text-left"
+      >
+        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-secondary text-foreground">
+          {isRunning ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Database className="size-4" />
+          )}
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="text-sm font-medium text-foreground">
+            {isRunning ? "Searching knowledge base…" : "Knowledge base"}
+          </div>
+          <div className="truncate text-xs text-muted-foreground">
+            {queries.length > 0
+              ? `"${queries[0]}"${queries.length > 1 ? ` and ${queries.length - 1} more` : ""}`
+              : "RAG retrieval"}
+            {!isRunning
+              ? ` · ${hits.length} ${hits.length === 1 ? "result" : "results"}`
+              : ""}
+          </div>
+        </div>
+        {!isRunning && hits.length > 0 ? (
+          <ChevronDown
+            className={`h-4 w-4 text-muted-foreground transition ${open ? "rotate-180" : ""}`}
+          />
+        ) : null}
+      </button>
+
+      {open && hits.length > 0 ? (
+        <div className="flex flex-col gap-px border-t border-border bg-border">
+          {hits.map((h, i) => (
+            <div key={i} className="bg-card px-3.5 py-3">
+              <div className="flex items-center justify-between gap-2">
+                <span className="truncate text-sm font-medium text-foreground">
+                  {h.title}
+                </span>
+                <span className="shrink-0 rounded-full bg-secondary px-2 py-0.5 text-[11px] tabular-nums text-muted-foreground">
+                  {Math.round(h.score * 100)}%
+                </span>
+              </div>
+              {h.url ? (
+                <div className="mt-0.5 truncate text-xs text-muted-foreground">
+                  {h.url}
+                </div>
+              ) : null}
+              <p className="mt-1.5 line-clamp-3 text-xs leading-relaxed text-muted-foreground">
+                {h.text}
+              </p>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/components/chat/message-item.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import type { UIMessage } from "ai";
+import { KnowledgeBaseResult } from "@/components/chat/knowledge-base-result";
+
+export function MessageItem({
+  message,
+  isLast,
+  isStreaming,
+}: {
+  message: UIMessage;
+  isLast?: boolean;
+  isStreaming?: boolean;
+}) {
+  const isUser = message.role === "user";
+
+  if (isUser) {
+    const text = message.parts
+      .filter((p) => p.type === "text")
+      .map((p: any) => p.text)
+      .join("");
+    return (
+      <div className="message user-message flex justify-end" data-role="user">
+        <div className="max-w-[85%] rounded-2xl rounded-br-md bg-primary/10 px-4 py-2.5 text-[15px] leading-relaxed text-foreground">
+          {text}
+        </div>
+      </div>
+    );
+  }
+
+  // UIMessage parts: "text", "tool-searchKnowledgeBase", etc.
+  const kbParts = message.parts.filter(
+    (p: any) => p.type === "tool-searchKnowledgeBase",
+  );
+  const textParts = message.parts.filter((p: any) => p.type === "text");
+
+  const isShimmering =
+    textParts.every((p: any) => !p.text || p.text.trim().length === 0) &&
+    isLast &&
+    isStreaming;
+
+  return (
+    <div className="message assistant-message flex flex-col gap-3" data-role="assistant">
+      {kbParts.length > 0 ? (
+        <KnowledgeBaseResult parts={kbParts} isShimmering={isShimmering} />
+      ) : null}
+
+      {textParts.map((part: any, i: number) => (
+        <div
+          key={i}
+          className="prose prose-sm max-w-none text-[15px] text-foreground prose-headings:text-foreground prose-strong:text-foreground prose-a:text-foreground prose-a:underline prose-a:underline-offset-2 prose-code:rounded prose-code:bg-secondary prose-code:px-1 prose-code:py-0.5 prose-code:text-xs prose-code:before:content-none prose-code:after:content-none"
+          dangerouslySetInnerHTML={{ __html: renderMarkdown(part.text || "") }}
+        />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Lightweight markdown → HTML for chat messages.
+ */
+function renderMarkdown(text: string): string {
+  if (!text) return "";
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    // Code blocks
+    .replace(
+      /```(\w*)\n([\s\S]*?)```/g,
+      '<pre class="rounded-lg bg-secondary p-3 text-xs overflow-x-auto my-2"><code>$2</code></pre>',
+    )
+    // Inline code
+    .replace(/`([^`]+)`/g, "<code>$1</code>")
+    // Bold
+    .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+    // Italic
+    .replace(/\*(.+?)\*/g, "<em>$1</em>")
+    // Links
+    .replace(
+      /\[([^\]]+)\]\(([^)]+)\)/g,
+      '<a href="$2" target="_blank" rel="noreferrer">$1</a>',
+    )
+    // Headings
+    .replace(
+      /^### (.+)$/gm,
+      '<h3 class="text-base font-semibold mt-3 mb-1">$1</h3>',
+    )
+    .replace(
+      /^## (.+)$/gm,
+      '<h2 class="text-lg font-semibold mt-4 mb-1">$1</h2>',
+    )
+    .replace(
+      /^# (.+)$/gm,
+      '<h1 class="text-xl font-semibold mt-4 mb-2">$1</h1>',
+    )
+    // Lists
+    .replace(/^- (.+)$/gm, '<li class="ml-4 list-disc">$1</li>')
+    .replace(/^\d+\. (.+)$/gm, '<li class="ml-4 list-decimal">$1</li>')
+    // Paragraphs
+    .replace(/\n\n/g, "</p><p>")
+    .replace(/\n/g, "<br/>");
+}