Add Official Library source panel

next.config.ts

@@ -3,7 +3,11 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   cacheComponents: true,
   reactCompiler: true,
-  serverExternalPackages: ["pg", "@neondatabase/serverless", "postgres"],
+  serverExternalPackages: [
+    "pg",
+    "@neondatabase/serverless",
+    "postgres",
+  ],
   allowedDevOrigins: [
     "127.0.0.1",
     "notebook.local.knowhereto.ai",

package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@ai-sdk/react": "^3.0.177",
+    "@antv/chart-visualization-skills": "0.1.3",
     "@effect/platform": "^0.96.1",
     "@neondatabase/serverless": "^1.1.0",
     "@ontos-ai/knowhere-sdk": "^0.6.0",

src/app/api/chat/diagram/route.test.ts

@@ -0,0 +1,61 @@
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+const mocks = vi.hoisted(() => ({
+  generateChatDiagramSpec: vi.fn(),
+  getAuthenticated: vi.fn(),
+  getAuthenticatedWithClient: vi.fn(),
+}))
+
+vi.mock("@/domains/chat/diagram", async (importOriginal) => {
+  const original = await importOriginal<typeof import("@/domains/chat/diagram")>()
+  return {
+    ...original,
+    generateChatDiagramSpec: mocks.generateChatDiagramSpec,
+  }
+})
+
+vi.mock("@/domains/workspace/request-context", () => ({
+  notebookRequestContext: {
+    getAuthenticated: mocks.getAuthenticated,
+    getAuthenticatedWithClient: mocks.getAuthenticatedWithClient,
+  },
+}))
+
+import { POST } from "./route"
+
+describe("POST /api/chat/diagram", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it("requires authentication without provisioning a Knowhere client", async () => {
+    mocks.getAuthenticated.mockResolvedValue({
+      user: { id: "user_1", name: null, email: null },
+      workspace: { id: "workspace_1", namespace: "notebook-workspace_1" },
+    })
+    mocks.generateChatDiagramSpec.mockResolvedValue({
+      type: "none",
+      reason: "The answer did not contain enough concrete data for a chart.",
+    })
+
+    const response = await POST(
+      new Request("http://localhost:3001/api/chat/diagram", {
+        method: "POST",
+        body: JSON.stringify({ answer: "Revenue was 42." }),
+      }),
+    )
+
+    await expect(response.json()).resolves.toEqual({
+      diagram: {
+        type: "none",
+        reason: "The answer did not contain enough concrete data for a chart.",
+      },
+    })
+    expect(response.status).toBe(200)
+    expect(mocks.getAuthenticated).toHaveBeenCalledOnce()
+    expect(mocks.getAuthenticatedWithClient).not.toHaveBeenCalled()
+    expect(mocks.generateChatDiagramSpec).toHaveBeenCalledWith({
+      answer: "Revenue was 42.",
+    })
+  })
+})

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

@@ -0,0 +1,41 @@
+import type { NextResponse } from "next/server"
+
+import {
+  generateChatDiagramSpec,
+  parseChatDiagramRequestBody,
+} from "@/domains/chat/diagram"
+import { notebookRequestContext } from "@/domains/workspace/request-context"
+import { isAuthError } from "@/integrations/dashboard/api-key-service"
+import { summarizeUnknownError } from "@/lib/format-log-value"
+import { logger } from "@/lib/logger"
+import { nextRouteResponse } from "@/lib/next-route-response"
+import { routeResult } from "@/lib/route-result"
+
+export async function POST(request: Request): Promise<NextResponse> {
+  const body = parseChatDiagramRequestBody(
+    await routeResult.readJsonOrNull(request),
+  )
+  if (!body.ok) {
+    return nextRouteResponse.toNextResponse(
+      routeResult.error(body.status, body.message),
+    )
+  }
+
+  try {
+    await notebookRequestContext.getAuthenticated()
+    const diagram = await generateChatDiagramSpec({
+      answer: body.value.answer,
+    })
+    return nextRouteResponse.toNextResponse(routeResult.ok({ diagram }))
+  } catch (error) {
+    const detail = summarizeUnknownError(error)
+    const status = isAuthError({ message: detail }) ? 401 : 502
+    logger.error("chat-diagram: generation failed", {
+      status,
+      detail,
+    })
+    return nextRouteResponse.toNextResponse(
+      routeResult.error(status, `Diagram generation failed: ${detail}`),
+    )
+  }
+}

src/components/chat-composer.test.ts

@@ -39,7 +39,7 @@ describe("ChatComposer", () => {
     );
 
     expect(
-      screen.queryByPlaceholderText("Upload a document to start asking questions."),
+      screen.queryByPlaceholderText("Add a ready source to start asking questions."),
     ).toBeNull();
 
     const loginButton = screen.getByRole("button", {
@@ -50,4 +50,36 @@ describe("ChatComposer", () => {
     await user.click(loginButton);
     expect(onLoginClick).toHaveBeenCalledOnce();
   });
+
+  it("inserts expert templates and highlights bracket placeholders", async () => {
+    const user = userEvent.setup();
+
+    render(React.createElement(ChatComposer));
+
+    await user.click(screen.getByRole("button", { name: "Create" }));
+    await user.click(
+      screen.getByRole("menuitem", { name: /IPO Prospectus Risk Mining/ }),
+    );
+
+    const input = screen.getByPlaceholderText(
+      "Ask a question about your documents…",
+    ) as HTMLTextAreaElement;
+    expect(input.value).toContain("prospectus of [Company Name]");
+    expect(screen.getByText("[Company Name]").className).toContain(
+      "text-primary",
+    );
+  });
+
+  it("renders a larger embedded composer input surface", () => {
+    render(React.createElement(ChatComposer));
+
+    const input = screen.getByPlaceholderText(
+      "Ask a question about your documents…",
+    );
+
+    expect(input.className).toContain("h-[128px]");
+    expect(input.className).toContain("border-0");
+    expect(input.className).toContain("shadow-none");
+    expect(screen.getByRole("button", { name: "Create" })).toBeTruthy();
+  });
 });