@carlonicora/nextjs-jsonapi 1.77.3 → 1.79.0

package/src/features/assistant/components/parts/AssistantThreadHeader.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import type { AssistantInterface } from "../../data/AssistantInterface";
+import {
+  Button,
+  Input,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "../../../../shadcnui";
+
+interface Props {
+  assistant: AssistantInterface;
+  onRename: (title: string) => Promise<void>;
+  onDelete: () => Promise<void>;
+}
+
+export function AssistantThreadHeader({ assistant, onRename, onDelete }: Props) {
+  const t = useTranslations();
+  const [renameValue, setRenameValue] = useState(assistant.title);
+  const [renameOpen, setRenameOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+
+  const handleRename = async () => {
+    const trimmed = renameValue.trim() || assistant.title;
+    await onRename(trimmed);
+    setRenameOpen(false);
+  };
+
+  const handleDelete = async () => {
+    await onDelete();
+    setDeleteOpen(false);
+  };
+
+  return (
+    <div className="flex items-center justify-between border-b px-5 py-3">
+      <div className="text-foreground text-base font-semibold">{assistant.title}</div>
+      <div className="flex items-center gap-2">
+        <Popover open={renameOpen} onOpenChange={setRenameOpen}>
+          <PopoverTrigger
+            render={
+              <Button variant="outline" size="sm">
+                {t("features.assistant.rename")}
+              </Button>
+            }
+          />
+          <PopoverContent className="flex flex-col gap-2 p-3">
+            <Input
+              value={renameValue}
+              onChange={(e) => setRenameValue(e.target.value)}
+              placeholder={t("features.assistant.rename_placeholder")}
+            />
+            <Button onClick={handleRename} size="sm">
+              {t("ui.buttons.save")}
+            </Button>
+          </PopoverContent>
+        </Popover>
+        <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+          <DialogTrigger
+            render={
+              <Button variant="outline" size="sm" className="text-destructive">
+                {t("features.assistant.delete")}
+              </Button>
+            }
+          />
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>{t("features.assistant.delete_confirm")}</DialogTitle>
+            </DialogHeader>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setDeleteOpen(false)}>
+                {t("ui.buttons.cancel")}
+              </Button>
+              <Button variant="destructive" onClick={handleDelete}>
+                {t("ui.buttons.confirm")}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+}

package/src/features/assistant/components/parts/__tests__/AssistantComposer.spec.tsx

@@ -0,0 +1,32 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { AssistantComposer } from "../AssistantComposer";
+
+describe("AssistantComposer", () => {
+  it("Enter submits non-empty content and clears the textarea", async () => {
+    const onSend = vi.fn().mockResolvedValue(undefined);
+    render(<AssistantComposer onSend={onSend} />);
+    const textarea = screen.getByPlaceholderText("features.assistant.composer_placeholder");
+    await userEvent.type(textarea, "hello");
+    await userEvent.keyboard("{Enter}");
+    expect(onSend).toHaveBeenCalledWith("hello");
+    expect((textarea as HTMLTextAreaElement).value).toBe("");
+  });
+
+  it("Shift+Enter does NOT submit", async () => {
+    const onSend = vi.fn();
+    render(<AssistantComposer onSend={onSend} />);
+    const textarea = screen.getByPlaceholderText("features.assistant.composer_placeholder");
+    await userEvent.type(textarea, "multi");
+    await userEvent.keyboard("{Shift>}{Enter}{/Shift}");
+    expect(onSend).not.toHaveBeenCalled();
+  });
+
+  it("Send is disabled on empty/whitespace", () => {
+    render(<AssistantComposer onSend={vi.fn()} />);
+    // "save" appears inside the ui.buttons.save key → button text matches /save/i
+    const send = screen.getByRole("button", { name: /save/i });
+    expect(send).toBeDisabled();
+  });
+});

package/src/features/assistant/components/parts/__tests__/AssistantEmptyState.spec.tsx

@@ -0,0 +1,27 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { AssistantEmptyState } from "../AssistantEmptyState";
+
+describe("AssistantEmptyState", () => {
+  it("renders the heading + 4 starter prompts", () => {
+    render(<AssistantEmptyState onSend={vi.fn()} />);
+    expect(screen.getByRole("heading", { name: "features.assistant.empty_state.title" })).toBeInTheDocument();
+    expect(screen.getByText("features.assistant.empty_state.subtitle")).toBeInTheDocument();
+    expect(screen.getByText("features.assistant.starters.a")).toBeInTheDocument();
+    expect(screen.getByText("features.assistant.starters.b")).toBeInTheDocument();
+    expect(screen.getByText("features.assistant.starters.c")).toBeInTheDocument();
+    expect(screen.getByText("features.assistant.starters.d")).toBeInTheDocument();
+  });
+
+  it("clicking a starter fills the composer (does NOT auto-send)", async () => {
+    const onSend = vi.fn();
+    render(<AssistantEmptyState onSend={onSend} />);
+    const firstStarter = screen.getByText("features.assistant.starters.a");
+    await userEvent.click(firstStarter);
+    const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+    // The starter key text itself is what the composer should hold (since useTranslations returns keys)
+    expect(textarea.value).toBe("features.assistant.starters.a");
+    expect(onSend).not.toHaveBeenCalled();
+  });
+});

package/src/features/assistant/components/parts/__tests__/AssistantSidebar.spec.tsx

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { AssistantInterface } from "../../../data/AssistantInterface";
+import { AssistantSidebar } from "../AssistantSidebar";
+
+function buildAssistantStub({
+  id,
+  title = "Stub",
+  updatedAt = new Date(),
+}: {
+  id: string;
+  title?: string;
+  updatedAt?: Date;
+}): AssistantInterface {
+  return {
+    id,
+    title,
+    messageCount: 0,
+    type: "assistants",
+    createdAt: updatedAt,
+    updatedAt,
+  } as unknown as AssistantInterface;
+}
+
+describe("AssistantSidebar", () => {
+  describe("with fake timers (bucket grouping)", () => {
+    beforeEach(() => vi.useFakeTimers().setSystemTime(new Date("2026-04-22T12:00:00Z")));
+    afterEach(() => vi.useRealTimers());
+
+    it("renders '+ New assistant' button and groups threads by bucket", () => {
+      const threads = [
+        buildAssistantStub({ id: "a1", title: "Today item", updatedAt: new Date("2026-04-22T09:00:00Z") }),
+        buildAssistantStub({ id: "a2", title: "Week item", updatedAt: new Date("2026-04-20T09:00:00Z") }),
+        buildAssistantStub({ id: "a3", title: "Old item", updatedAt: new Date("2026-03-01T09:00:00Z") }),
+      ];
+      render(<AssistantSidebar threads={threads} activeId="a1" onSelect={vi.fn()} onNew={vi.fn()} />);
+      // New button: translation key includes "new" — matches /new/
+      expect(screen.getByRole("button", { name: /features\.assistant\.new/ })).toBeInTheDocument();
+      expect(screen.getByText("features.assistant.bucket_today")).toBeInTheDocument();
+      expect(screen.getByText("features.assistant.bucket_week")).toBeInTheDocument();
+      expect(screen.getByText("features.assistant.bucket_earlier")).toBeInTheDocument();
+    });
+
+    it("empty threads: shows empty_sidebar key", () => {
+      render(<AssistantSidebar threads={[]} onSelect={vi.fn()} onNew={vi.fn()} />);
+      expect(screen.getByText("features.assistant.empty_sidebar")).toBeInTheDocument();
+    });
+  });
+
+  it("clicking a thread calls onSelect with its id", async () => {
+    const onSelect = vi.fn();
+    const threads = [buildAssistantStub({ id: "a1", title: "T", updatedAt: new Date("2026-04-22T09:00:00Z") })];
+    render(<AssistantSidebar threads={threads} onSelect={onSelect} onNew={vi.fn()} />);
+    await userEvent.click(screen.getByRole("button", { name: /^T$/ }));
+    expect(onSelect).toHaveBeenCalledWith("a1");
+  });
+});

package/src/features/assistant/components/parts/__tests__/AssistantStatusLine.spec.tsx

@@ -0,0 +1,19 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { AssistantStatusLine } from "../AssistantStatusLine";
+
+// next-intl is globally mocked in vitest.setup.ts:
+//   useTranslations: () => (key) => key
+// So t("features.assistant.thinking") returns the key string.
+
+describe("AssistantStatusLine", () => {
+  it("renders the status when provided", () => {
+    render(<AssistantStatusLine status="Reading orders · abc" />);
+    expect(screen.getByText("Reading orders · abc")).toBeInTheDocument();
+  });
+
+  it("falls back to the translation key when no status", () => {
+    render(<AssistantStatusLine />);
+    expect(screen.getByText("features.assistant.thinking")).toBeInTheDocument();
+  });
+});

package/src/features/assistant/components/parts/__tests__/AssistantThread.spec.tsx

@@ -0,0 +1,39 @@
+import { describe, it, expect, vi, beforeAll } from "vitest";
+import { render, screen } from "@testing-library/react";
+import type { ApiDataInterface } from "../../../../../core";
+import type { AssistantMessageInterface } from "../../../../assistant-message/data/AssistantMessageInterface";
+import { AssistantThread } from "../AssistantThread";
+
+beforeAll(() => {
+  // jsdom lacks scrollIntoView
+  Element.prototype.scrollIntoView = vi.fn();
+});
+
+function buildMessageStub(p: { role: "user" | "assistant"; content?: string }): AssistantMessageInterface {
+  return {
+    id: Math.random().toString(36).slice(2),
+    type: "assistant-messages",
+    role: p.role,
+    content: p.content ?? "",
+    position: 0,
+    references: [] as ApiDataInterface[],
+    suggestedQuestions: [] as string[],
+    createdAt: new Date(),
+    updatedAt: new Date(),
+  } as unknown as AssistantMessageInterface;
+}
+
+describe("AssistantThread", () => {
+  it("renders message list + status line when sending", () => {
+    const msgs = [buildMessageStub({ role: "user", content: "hi" })];
+    render(<AssistantThread messages={msgs} sending={true} status="Searching..." onSelectFollowUp={vi.fn()} />);
+    expect(screen.getByText("hi")).toBeInTheDocument();
+    expect(screen.getByText(/Searching/)).toBeInTheDocument();
+  });
+
+  it("hides status line when not sending", () => {
+    render(<AssistantThread messages={[]} sending={false} status={undefined} onSelectFollowUp={vi.fn()} />);
+    // When not sending, AssistantStatusLine should not render → the default "thinking" key should be absent
+    expect(screen.queryByText("features.assistant.thinking")).not.toBeInTheDocument();
+  });
+});

package/src/features/assistant/components/parts/__tests__/AssistantThreadHeader.spec.tsx

@@ -0,0 +1,67 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { AssistantInterface } from "../../../data/AssistantInterface";
+import { AssistantThreadHeader } from "../AssistantThreadHeader";
+
+function buildAssistantStub({ id, title = "Stub" }: { id: string; title?: string }): AssistantInterface {
+  return {
+    id,
+    title,
+    messageCount: 0,
+    type: "assistants",
+    createdAt: new Date(),
+    updatedAt: new Date(),
+  } as unknown as AssistantInterface;
+}
+
+describe("AssistantThreadHeader", () => {
+  it("renders title + rename + delete triggers", () => {
+    render(
+      <AssistantThreadHeader
+        assistant={buildAssistantStub({ id: "a1", title: "Hello" })}
+        onRename={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    );
+    expect(screen.getByText("Hello")).toBeInTheDocument();
+    // Translation keys are passed through, so /rename/ and /delete/ match keys like "features.assistant.rename"
+    expect(screen.getByRole("button", { name: /rename/ })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /delete/ })).toBeInTheDocument();
+  });
+
+  it("rename popover submits new title and closes", async () => {
+    const onRename = vi.fn().mockResolvedValue(undefined);
+    render(
+      <AssistantThreadHeader
+        assistant={buildAssistantStub({ id: "a1", title: "Old" })}
+        onRename={onRename}
+        onDelete={vi.fn()}
+      />,
+    );
+    await userEvent.click(screen.getByRole("button", { name: /rename/ }));
+    const input = await screen.findByRole("textbox");
+    await userEvent.clear(input);
+    await userEvent.type(input, "New");
+    // "save" appears in the ui.buttons.save key → matches /save/
+    await userEvent.click(screen.getByRole("button", { name: /save/ }));
+    expect(onRename).toHaveBeenCalledWith("New");
+  });
+
+  it("delete confirm calls onDelete", async () => {
+    const onDelete = vi.fn().mockResolvedValue(undefined);
+    render(
+      <AssistantThreadHeader
+        assistant={buildAssistantStub({ id: "a1", title: "X" })}
+        onRename={vi.fn()}
+        onDelete={onDelete}
+      />,
+    );
+    // open the dialog
+    await userEvent.click(screen.getByRole("button", { name: /delete/ }));
+    // "confirm" appears in the ui.buttons.confirm key
+    const confirmBtn = await screen.findByRole("button", { name: /confirm/ });
+    await userEvent.click(confirmBtn);
+    expect(onDelete).toHaveBeenCalled();
+  });
+});

package/src/features/assistant/contexts/AssistantContext.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { SharedProvider } from "../../../contexts";
+import { useSocketContext } from "../../../contexts/SocketContext";
+import { BreadcrumbItemData, JsonApiHydratedDataInterface, Modules, rehydrate, rehydrateList } from "../../../core";
+import { usePageUrlGenerator } from "../../../hooks";
+import { AssistantMessage } from "../../assistant-message/data/AssistantMessage";
+import type { AssistantMessageInterface } from "../../assistant-message/data/AssistantMessageInterface";
+import { AssistantMessageService } from "../../assistant-message/data/AssistantMessageService";
+import type { AssistantInterface } from "../data/AssistantInterface";
+import { AssistantService } from "../data/AssistantService";
+
+interface AssistantContextValue {
+  assistant?: AssistantInterface;
+  messages: AssistantMessageInterface[];
+  threads: AssistantInterface[];
+  threadsLoading: boolean;
+  sending: boolean;
+  status?: string;
+  failedMessageIds: Set<string>;
+  sendMessage(content: string): Promise<void>;
+  retrySend(tempId: string): Promise<void>;
+  selectThread(id: string): Promise<void>;
+  startNew(): void;
+  renameThread(id: string, title: string): Promise<void>;
+  deleteThread(id: string): Promise<void>;
+}
+
+const AssistantContext = createContext<AssistantContextValue | undefined>(undefined);
+
+interface Props {
+  children: React.ReactNode;
+  dehydratedAssistant?: JsonApiHydratedDataInterface;
+  dehydratedMessages?: JsonApiHydratedDataInterface[];
+}
+
+function stripOptimistic(list: AssistantMessageInterface[]): AssistantMessageInterface[] {
+  return list.filter((m) => !m.id.startsWith("tmp-"));
+}
+
+function nextPosition(list: AssistantMessageInterface[]): number {
+  return list.reduce((max, m) => (m.position > max ? m.position : max), 0) + 1;
+}
+
+function withPatchedTitle(source: AssistantInterface, title: string): AssistantInterface {
+  const dehydrated = source.dehydrate();
+  return rehydrate<AssistantInterface>(Modules.Assistant, {
+    jsonApi: {
+      ...dehydrated.jsonApi,
+      attributes: { ...(dehydrated.jsonApi?.attributes ?? {}), title },
+    },
+    included: dehydrated.included,
+  });
+}
+
+export function AssistantProvider({ children, dehydratedAssistant, dehydratedMessages }: Props) {
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+
+  const [assistant, setAssistant] = useState<AssistantInterface | undefined>(() =>
+    dehydratedAssistant ? rehydrate<AssistantInterface>(Modules.Assistant, dehydratedAssistant) : undefined,
+  );
+  const [messages, setMessages] = useState<AssistantMessageInterface[]>(() =>
+    dehydratedMessages ? rehydrateList<AssistantMessageInterface>(Modules.AssistantMessage, dehydratedMessages) : [],
+  );
+  const [threads, setThreads] = useState<AssistantInterface[]>([]);
+  const [threadsLoading, setThreadsLoading] = useState<boolean>(true);
+  const [sending, setSending] = useState<boolean>(false);
+  const [status, setStatus] = useState<string | undefined>(undefined);
+  const [failedMessageIds, setFailedMessageIds] = useState<Set<string>>(() => new Set());
+  const { socket } = useSocketContext();
+
+  const sendMessage = useCallback(
+    async (content: string) => {
+      const trimmed = content.trim();
+      if (!trimmed) return;
+
+      const optimistic = AssistantMessage.buildOptimistic({
+        content: trimmed,
+        assistantId: assistant?.id,
+        position: nextPosition(messages),
+      });
+      setMessages((prev) => [...prev, optimistic]);
+      setSending(true);
+
+      const handler = (payload: { assistantId?: string; status?: string }) => {
+        if (!payload) return;
+        if (assistant && payload.assistantId && payload.assistantId !== assistant.id) return;
+        if (typeof payload.status === "string") setStatus(payload.status);
+      };
+      socket?.on("assistant:status", handler);
+
+      try {
+        if (!assistant) {
+          const created = await AssistantService.create({ firstMessage: trimmed });
+          const msgs = await AssistantMessageService.findByAssistant({ assistantId: created.id });
+          setAssistant(created);
+          setMessages(msgs);
+          setThreads((prev) => [created, ...prev]);
+          if (typeof window !== "undefined") {
+            window.history.replaceState(null, "", `/assistants/${created.id}`);
+          }
+        } else {
+          const result = await AssistantService.appendMessage({
+            assistantId: assistant.id,
+            content: trimmed,
+          });
+          setMessages((prev) => [...stripOptimistic(prev), ...result]);
+        }
+      } catch {
+        setFailedMessageIds((prev) => {
+          const next = new Set(prev);
+          next.add(optimistic.id);
+          return next;
+        });
+      } finally {
+        socket?.off("assistant:status", handler);
+        setSending(false);
+        setStatus(undefined);
+      }
+    },
+    [assistant, messages, socket],
+  );
+
+  const retrySend = useCallback(
+    async (tempId: string) => {
+      const failed = messages.find((m) => m.id === tempId);
+      if (!failed) return;
+      const content = failed.content;
+
+      setMessages((prev) => prev.filter((m) => m.id !== tempId));
+      setFailedMessageIds((prev) => {
+        const next = new Set(prev);
+        next.delete(tempId);
+        return next;
+      });
+
+      await sendMessage(content);
+    },
+    [messages, sendMessage],
+  );
+
+  const selectThread = useCallback(async (id: string) => {
+    const [target, msgs] = await Promise.all([
+      AssistantService.findOne({ id }),
+      AssistantMessageService.findByAssistant({ assistantId: id }),
+    ]);
+    setAssistant(target);
+    setMessages(msgs);
+    if (typeof window !== "undefined") {
+      window.history.replaceState(null, "", `/assistants/${id}`);
+    }
+  }, []);
+
+  const renameThread = useCallback(async (id: string, title: string) => {
+    await AssistantService.rename({ id, title });
+    setAssistant((prev) => (prev && prev.id === id ? withPatchedTitle(prev, title) : prev));
+    setThreads((prev) => prev.map((t) => (t.id === id ? withPatchedTitle(t, title) : t)));
+  }, []);
+
+  const startNew = useCallback(() => {
+    setAssistant(undefined);
+    setMessages([]);
+    setFailedMessageIds(new Set());
+    if (typeof window !== "undefined") {
+      window.history.replaceState(null, "", "/assistants");
+    }
+  }, []);
+
+  const deleteThread = useCallback(async (id: string) => {
+    await AssistantService.delete({ id });
+    setThreads((prev) => prev.filter((t) => t.id !== id));
+    setAssistant((prev) => {
+      if (prev?.id === id) {
+        setMessages([]);
+        return undefined;
+      }
+      return prev;
+    });
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      setThreadsLoading(true);
+      try {
+        const loaded = await AssistantService.findMany();
+        if (!cancelled) setThreads(loaded);
+      } finally {
+        if (!cancelled) setThreadsLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const value = useMemo<AssistantContextValue>(
+    () => ({
+      assistant,
+      messages,
+      threads,
+      threadsLoading,
+      sending,
+      status,
+      failedMessageIds,
+      sendMessage,
+      retrySend,
+      selectThread,
+      startNew,
+      renameThread,
+      deleteThread,
+    }),
+    [
+      assistant,
+      messages,
+      threads,
+      threadsLoading,
+      sending,
+      status,
+      failedMessageIds,
+      sendMessage,
+      retrySend,
+      selectThread,
+      startNew,
+      renameThread,
+      deleteThread,
+    ],
+  );
+
+  const breadcrumbs: BreadcrumbItemData[] = [
+    {
+      name: t("entities.assistants", { count: 2 }),
+      href: generateUrl({ page: Modules.Assistant }),
+    },
+  ];
+
+  const title = {
+    type: t("entities.tasks", { count: 2 }),
+  };
+
+  return (
+    <AssistantContext.Provider value={value}>
+      <SharedProvider value={{ breadcrumbs, title }}>{children}</SharedProvider>
+    </AssistantContext.Provider>
+  );
+}
+
+export function useAssistantContext(): AssistantContextValue {
+  const ctx = useContext(AssistantContext);
+  if (!ctx) throw new Error("useAssistantContext must be used within AssistantProvider");
+  return ctx;
+}