feat: decouple components from plugins by using slots architecture

Author: dazy-ds

typescript/ui/__tests__/integration/intergation.test.tsx

@@ -33,7 +33,7 @@ import FeedbackForm from "../../src/plugins/FeedbackPlugin/components/FeedbackFo
 import { createStore } from "zustand";
 import { useHistoryStore } from "../../src/core/stores/HistoryStore/useHistoryStore";
 import { HistoryStore } from "../../src/core/types/history";
-import { API_URL } from "../../src/config";
+import { API_URL } from "../../src/core/config";
 import { createHistoryStore } from "../../src/ragbits/stores/HistoryStore/historyStore";
 
 vi.mock("../../src/core/stores/HistoryStore/useHistoryStore", () => {

typescript/ui/__tests__/unit/ChatMessage.test.tsx

@@ -3,8 +3,8 @@ import { describe, it, expect, beforeEach, vi, Mock } from "vitest";
 import ChatMessage from "../../src/core/components/ChatMessage/ChatMessage";
 import { MessageRole } from "@ragbits/api-client-react";
 import { enableMapSet } from "immer";
-import PluginWrapper from "../../src/core/utils/plugins/PluginWrapper";
 import { ComponentProps, PropsWithChildren } from "react";
+import { Slot } from "../../src/core/components/Slot";
 
 vi.mock("../../src/core/stores/HistoryStore/useHistoryStore", () => {
   return {
@@ -16,6 +16,9 @@ vi.mock("../../src/core/stores/HistoryStore/selectors", () => {
   return {
     useConversationProperty: vi.fn(),
     useMessage: vi.fn(),
+    useHistoryActions: vi.fn(() => ({
+      sendSilentConfirmation: vi.fn(),
+    })),
   };
 });
 
@@ -93,18 +96,17 @@ function mockStore(
   });
 }
 
-const COMPONENT_TEST_ID: Record<string, string> = {
-  FeedbackForm: "feedback-form",
-  UsageButton: "usage-button",
-};
-
-vi.mock("../../src/core/utils/plugins/PluginWrapper.tsx", () => ({
-  default: ({ component }: ComponentProps<typeof PluginWrapper>) => {
-    return (
-      <div data-testid={COMPONENT_TEST_ID[component]} data-plugin={component}>
-        {component}
-      </div>
-    );
+vi.mock("../../src/core/components/Slot.tsx", () => ({
+  Slot: ({ name }: ComponentProps<typeof Slot>) => {
+    if (name === "message.actions") {
+      return (
+        <>
+          <div data-testid="feedback-form">FeedbackForm</div>
+          <div data-testid="usage-button">UsageButton</div>
+        </>
+      );
+    }
+    return null;
   },
 }));
 
@@ -142,38 +144,13 @@ describe("ChatMessage", () => {
 
     it("shows feedback from when enabled", () => {
       mockStore(MessageRole.Assistant);
-      vi.mock(
-        "../../src/core/contexts/ConfigContex/useConfigContext.tsx",
-        () => ({
-          config: {
-            feedback: {
-              like: {
-                enabled: true,
-                form: null,
-              },
-              dislike: {
-                enabled: true,
-                form: null,
-              },
-            },
-          },
-        }),
-      );
 
       render(<ChatMessage messageId={MessageRole.Assistant} />);
       expect(screen.getByTestId("feedback-form")).toBeInTheDocument();
     });
 
     it("shows usage button when enabled", () => {
       mockStore(MessageRole.Assistant);
-      vi.mock(
-        "../../src/core/contexts/ConfigContex/useConfigContext.tsx",
-        () => ({
-          config: {
-            show_usage: true,
-          },
-        }),
-      );
 
       render(<ChatMessage messageId={MessageRole.Assistant} />);
       expect(screen.getByTestId("usage-button")).toBeInTheDocument();

typescript/ui/__tests__/unit/Layout.test.tsx

@@ -1,7 +1,10 @@
 import { render, screen, waitFor } from "@testing-library/react";
-import { describe, expect, it, Mock, vi } from "vitest";
+import { describe, expect, it, Mock, vi, beforeEach, afterEach } from "vitest";
 import userEvent from "@testing-library/user-event";
 import Layout from "../../src/core/components/Layout";
+import { Slot } from "../../src/core/components/Slot";
+import { ComponentProps } from "react";
+
 vi.mock("../../src/core/components/DebugPanel", () => ({
   default: ({ isOpen }: { isOpen: boolean }) => (
     <div>isOpen: {JSON.stringify(isOpen)}</div>
@@ -26,31 +29,39 @@ vi.mock("../../src/core/stores/HistoryStore/selectors", () => {
   };
 });
 
-vi.mock(
-  "../../src/plugins/ChatHistoryPlugin/components/ChatHistory.tsx",
-  () => ({
-    default: () => <div>ChatHistory</div>,
-  }),
-);
+// Track whether chat history should be enabled
+let chatHistoryEnabled = false;
+
+vi.mock("../../src/core/components/Slot.tsx", () => ({
+  Slot: ({ name }: ComponentProps<typeof Slot>) => {
+    if (name === "layout.sidebar" && chatHistoryEnabled) {
+      return <div>ChatHistory</div>;
+    }
+    if (name === "layout.headerActions") {
+      return <div data-testid="header-actions-slot">HeaderActions</div>;
+    }
+    return null;
+  },
+}));
+
+vi.mock("../../src/core/utils/slots/useSlotHasFillers.ts", () => ({
+  useSlotHasFillers: (slot: string) => {
+    if (slot === "layout.sidebar") {
+      return chatHistoryEnabled;
+    }
+    return false;
+  },
+}));
 
 import { useConfigContext } from "../../src/core/contexts/ConfigContext/useConfigContext";
 import { useThemeContext } from "../../src/core/contexts/ThemeContext/useThemeContext";
 import { Theme } from "../../src/core/contexts/ThemeContext/ThemeContext";
 import { useHistoryActions } from "../../src/core/stores/HistoryStore/selectors";
-import { pluginManager } from "../../src/core/utils/plugins/PluginManager";
-import {
-  ChatHistoryPlugin,
-  ChatHistoryPluginName,
-} from "../../src/plugins/ChatHistoryPlugin";
-
-function mockConfig(
-  isDebugEnabled: boolean = false,
-  withClientSideHistory: boolean = false,
-) {
+
+function mockConfig(isDebugEnabled: boolean = false) {
   (useConfigContext as Mock).mockReturnValue({
     config: {
       debug_mode: isDebugEnabled,
-      conversationHistory: withClientSideHistory,
     },
   });
 }
@@ -63,18 +74,25 @@ function mockTheme(theme: Theme) {
   });
 }
 
-const clearHistoryMock = vi.fn();
+const newConversationMock = vi.fn();
 const stopAnsweringMock = vi.fn();
 (useHistoryActions as Mock).mockReturnValue({
-  clearHistory: clearHistoryMock,
+  newConversation: newConversationMock,
   stopAnswering: stopAnsweringMock,
 });
 
 describe("Layout", () => {
+  beforeEach(() => {
+    chatHistoryEnabled = false;
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
   it("renders with chat history", async () => {
-    pluginManager.register(ChatHistoryPlugin);
-    pluginManager.activate(ChatHistoryPluginName);
-    mockConfig(false, true);
+    chatHistoryEnabled = true;
+    mockConfig(false);
     mockTheme(Theme.LIGHT);
     render(
       <Layout
@@ -102,9 +120,10 @@ describe("Layout", () => {
     ).toBeInTheDocument();
     expect(screen.queryByTestId("layout-debug-button")).toBeNull();
   });
+
   it("renders without chat history", async () => {
-    pluginManager.deactivate(ChatHistoryPluginName);
-    mockConfig(false, false);
+    chatHistoryEnabled = false;
+    mockConfig(false);
     mockTheme(Theme.LIGHT);
     render(
       <Layout
@@ -119,9 +138,8 @@ describe("Layout", () => {
     expect(screen.getByText("Custom Title")).toBeInTheDocument();
     expect(screen.getByText("Custom Subtitle")).toBeInTheDocument();
     expect(screen.getByText("Custom Logo")).toBeInTheDocument();
-    // Chat history
 
-    // Chat history
+    // Chat history should not be present
     await waitFor(() => {
       expect(screen.queryByText("ChatHistory")).not.toBeInTheDocument();
       expect(
@@ -134,6 +152,7 @@ describe("Layout", () => {
     ).toBeInTheDocument();
     expect(screen.queryByTestId("layout-debug-button")).toBeNull();
   });
+
   it("renders without debug panel", () => {
     mockConfig();
     mockTheme(Theme.LIGHT);
@@ -197,6 +216,7 @@ describe("Layout", () => {
     await user.click(toggleThemeButton);
     expect(setThemeMock).toHaveBeenCalled();
   });
+
   it('shows debug panel when "debug button" is clicked', async () => {
     mockConfig(true);
     mockTheme(Theme.LIGHT);

typescript/ui/__tests__/unit/PromptInput.test.tsx

@@ -1,12 +1,12 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { describe, it, expect, vi } from "vitest";
-import PluginWrapper from "../../src/core/utils/plugins/PluginWrapper";
 import { ComponentProps } from "react";
 import HorizontalActions from "../../src/core/components/inputs/PromptInput/HorizontalActions";
 import PromptInput from "../../src/core/components/inputs/PromptInput/PromptInput";
 import userEvent from "@testing-library/user-event";
 import { ChatMessage } from "../../src/core/types/history";
 import { MessageRole } from "@ragbits/api-client";
+import { Slot } from "../../src/core/components/Slot";
 
 vi.mock(
   "../../src/core/components/inputs/PromptInput/HorizontalActions.tsx",
@@ -16,10 +16,10 @@ vi.mock(
   }),
 );
 
-vi.mock("../../src/core/utils/plugins/PluginWrapper.tsx", () => ({
-  default: ({ component }: ComponentProps<typeof PluginWrapper>) => (
-    <div data-testid="feedback-form" data-plugin={component}>
-      {component}
+vi.mock("../../src/core/components/Slot.tsx", () => ({
+  Slot: ({ name }: ComponentProps<typeof Slot>) => (
+    <div data-testid="slot" data-slot-name={name}>
+      {name === "prompt.beforeSend" ? "ChatOptionsForm" : name}
     </div>
   ),
 }));

typescript/ui/__tests__/unit/plugin/ChatHistoryPlugin/ChatHistory.test.tsx

@@ -28,7 +28,7 @@ import { useHistoryActions } from "../../../../src/core/stores/HistoryStore/sele
 import { useHistoryStore } from "../../../../src/core/stores/HistoryStore/useHistoryStore";
 import ChatHistory from "../../../../src/plugins/ChatHistoryPlugin/components/ChatHistory";
 import { HistoryStore } from "../../../../src/core/types/history";
-import { isTemporaryConversation } from "../../../../src/ragbits/stores/HistoryStore/historyStore";
+import { isTemporaryConversation } from "../../../../src/core/stores/HistoryStore/utils";
 
 const MOCK_CONVERSATIONS: HistoryStore["conversations"] = {
   "mock-id-1": {

typescript/ui/__tests__/unit/plugin/UsagePlugin/UsageButton.test.tsx

@@ -3,6 +3,7 @@ import userEvent from "@testing-library/user-event";
 import { describe, it, expect } from "vitest";
 import { ChatMessage } from "../../../../src/core/types/history";
 import UsageButton from "../../../../src/plugins/UsagePlugin/components/UsageButton";
+import { MessageRole } from "@ragbits/api-client";
 
 const mockUsage: Exclude<ChatMessage["usage"], undefined> = {
   "gpt-4": {
@@ -21,17 +22,24 @@ const mockUsage: Exclude<ChatMessage["usage"], undefined> = {
   },
 };
 
+const mockMessage: ChatMessage = {
+  id: "test-message-id",
+  role: MessageRole.Assistant,
+  content: "Test message content",
+  usage: mockUsage,
+};
+
 describe("UsageButton", () => {
   const user = userEvent.setup();
   it("renders the info button", () => {
-    render(<UsageButton usage={mockUsage} />);
+    render(<UsageButton message={mockMessage} />);
     expect(
       screen.getByRole("button", { name: /open usage details/i }),
     ).toBeInTheDocument();
   });
 
   it("shows tooltip with summary info on hover", async () => {
-    render(<UsageButton usage={mockUsage} />);
+    render(<UsageButton message={mockMessage} />);
     const button = screen.getByRole("button", { name: /open usage details/i });
 
     await user.tab();
@@ -46,7 +54,7 @@ describe("UsageButton", () => {
   });
 
   it("opens modal with detailed usage table when clicked", async () => {
-    render(<UsageButton usage={mockUsage} />);
+    render(<UsageButton message={mockMessage} />);
     await user.click(
       screen.getByRole("button", { name: /open usage details/i }),
     );
@@ -76,7 +84,7 @@ describe("UsageButton", () => {
   });
 
   it("closes modal when pressing Escape", async () => {
-    render(<UsageButton usage={mockUsage} />);
+    render(<UsageButton message={mockMessage} />);
     await user.click(
       screen.getByRole("button", { name: /open usage details/i }),
     );
@@ -89,4 +97,14 @@ describe("UsageButton", () => {
       expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
     });
   });
+
+  it("returns null when message has no usage data", () => {
+    const messageWithoutUsage: ChatMessage = {
+      id: "test-message-id",
+      role: MessageRole.Assistant,
+      content: "Test message content",
+    };
+    const { container } = render(<UsageButton message={messageWithoutUsage} />);
+    expect(container).toBeEmptyDOMElement();
+  });
 });

typescript/ui/src/App.tsx

@@ -1,13 +1,16 @@
 import Layout from "./core/components/Layout";
 import { useLayoutEffect, useMemo } from "react";
 import { useConfigContext } from "./core/contexts/ConfigContext/useConfigContext";
-import { DEFAULT_LOGO, DEFAULT_SUBTITLE, DEFAULT_TITLE } from "./config";
+import { DEFAULT_LOGO, DEFAULT_SUBTITLE, DEFAULT_TITLE } from "./core/config";
 import { Outlet } from "react-router";
 import { isURL } from "./core/utils/media";
+import { usePluginActivation } from "./ragbits/PluginActivator";
 
 const CUSTOM_FAVICON_ID = "generated-favicon";
 
 export default function App() {
+  usePluginActivation();
+
   const {
     config: { customization },
   } = useConfigContext();