@eeacms/volto-eea-chatbot 2.0.4 → 3.0.0

package/src/AISearchInput/styles.less

@@ -0,0 +1,320 @@
+// AI Search Input styles — scoped under .ais-search-input
+// Uses EEA Design System tokens
+
+@import '@eeacms/volto-design-tokens/src/colors';
+@import '@eeacms/volto-design-tokens/src/shapes';
+@import '@eeacms/volto-design-tokens/src/borders';
+@import '@eeacms/volto-design-tokens/src/fonts';
+
+// Spacing tokens from @eeacms/volto-design-tokens/src/sizes
+// (imported manually to avoid @1px Semantic UI dependency)
+@spacer: 4px;
+@space-025: @spacer * 0.25;
+@space-05: @spacer * 0.5;
+@space-1: @spacer * 1;
+@space-2: @spacer * 2;
+@space-3: @spacer * 3;
+@space-4: @spacer * 4;
+@space-5: @spacer * 5;
+@space-6: @spacer * 6;
+@space-8: @spacer * 8;
+
+// Size tokens
+@size-10: 120px;
+
+.ais-search-input {
+  display: flex;
+  flex-direction: column;
+  padding: @space-6;
+  gap: @space-3;
+
+  // --- Dark variant (default) ---
+  &.ais-dark {
+    background-color: @blue-6;
+    color: @grey-0;
+
+    .ais-chip {
+      background-color: @blue-5;
+    }
+
+    .ais-search-input-field {
+      border-bottom-color: @grey-0;
+    }
+
+    .ais-input-error {
+      color: @red-2;
+    }
+  }
+
+  // --- Light variant ---
+  &.ais-light {
+    background-color: @grey-1;
+    color: @grey-5;
+
+    .ais-chip {
+      background-color: @grey-2;
+    }
+
+    .ais-search-input-field {
+      border-bottom-color: @grey-5;
+    }
+
+    .ais-input-error {
+      color: @red-5;
+    }
+  }
+
+  // --- Accent variant (EEA green/teal) ---
+  &.ais-accent {
+    background-color: @green-5;
+    color: @grey-0;
+
+    .ais-chip {
+      background-color: @green-4;
+    }
+
+    .ais-search-input-field {
+      border-bottom-color: @grey-0;
+    }
+
+    .ais-input-error {
+      color: @red-1;
+    }
+  }
+
+  // --- Intro header (Row 1) ---
+  .ais-intro-header {
+    display: flex;
+    align-items: flex-start;
+    gap: @space-2;
+
+    .ais-icon {
+      flex-shrink: 0;
+      margin-top: @space-05;
+    }
+
+    .ais-intro-content {
+      display: flex;
+      flex-direction: column;
+      gap: @space-05;
+    }
+
+    .ais-block-title {
+      font-size: @font-size-1;
+      font-weight: @font-weight-6;
+    }
+
+    // Slate-rendered intro text
+    :global(.slate-editor) {
+      margin: 0;
+      font-size: @font-size-0;
+      line-height: @font-lineheight-2;
+
+      p {
+        margin: 0;
+      }
+
+      a {
+        color: inherit;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  // --- Search input (Row 2) ---
+  .ais-search-input-field {
+    display: flex;
+    align-items: center;
+    padding-bottom: @space-1;
+    border-bottom: @border-size-2 solid currentColor;
+
+    input {
+      flex: 1;
+      padding: @space-1 0;
+      border: none;
+      background: transparent;
+      color: inherit;
+      font-family: inherit;
+      font-size: @font-size-1;
+      outline: none;
+
+      &::placeholder {
+        color: inherit;
+        opacity: 0.6;
+      }
+    }
+
+    .ais-submit-btn {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      padding: @space-1;
+      border: none;
+      background: none;
+      color: inherit;
+      cursor: pointer;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 0.8;
+      }
+
+      &:focus-visible {
+        border-radius: @radius-1;
+        outline: @border-size-2 solid currentColor;
+        outline-offset: @space-05;
+      }
+    }
+  }
+
+  .ais-input-error {
+    width: 100%;
+    margin-top: @space-1;
+    font-size: @font-size-00;
+  }
+
+  // --- Controls row: chips (left) + deep research toggle (right) ---
+  .ais-controls-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: @space-2;
+  }
+
+  // --- Prompt chips ---
+  .ais-prompt-chips {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    gap: @space-2;
+
+    .ais-chip {
+      padding: @space-1 @space-3;
+      border: none;
+      border-radius: @radius-0;
+      color: inherit;
+      cursor: pointer;
+      font-family: inherit;
+      font-size: @font-size-0;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 0.85;
+      }
+
+      &:focus-visible {
+        outline: @border-size-2 solid currentColor;
+        outline-offset: @space-05;
+      }
+    }
+  }
+
+  // --- Deep research toggle (right-aligned) ---
+  .ais-deep-research {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    margin-left: auto;
+  }
+
+  .ais-deep-research-label {
+    font-size: @font-size-00;
+    opacity: 0.8;
+  }
+
+  // Custom toggle switch
+  .ais-toggle {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: @font-size-0;
+    gap: @space-2;
+
+    input {
+      display: none;
+    }
+
+    .ais-toggle-slider {
+      position: relative;
+      display: inline-block;
+      width: 28px;
+      height: 16px;
+      border: @border-size-1 solid currentColor;
+      border-radius: @radius-3;
+      background-color: rgba(currentColor, 0.15);
+      transition: background-color 0.2s;
+
+      &::before {
+        position: absolute;
+        top: 1px;
+        left: 2px;
+        display: block;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background-color: currentColor;
+        content: '';
+        transition: left 0.2s;
+      }
+    }
+
+    input:checked ~ .ais-toggle-slider {
+      border-color: @green-4;
+      background-color: @green-4;
+
+      &::before {
+        left: 13px;
+      }
+    }
+  }
+
+  // --- Disclaimer (Row 5) ---
+  .ais-disclaimer {
+    margin-top: @space-1;
+    font-size: @font-size-00;
+    opacity: 0.7;
+
+    :global(.slate-editor) {
+      font-size: inherit;
+
+      p {
+        margin: 0;
+      }
+
+      a {
+        color: inherit;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  // --- Responsive ---
+  @media (max-width: 768px) {
+    padding: @space-4;
+    gap: @space-2;
+
+    .ais-intro-header {
+      .ais-icon {
+        width: @space-5;
+        height: @space-5;
+      }
+
+      .ais-block-title {
+        font-size: @font-size-0;
+      }
+
+      :global(.slate-editor) {
+        font-size: @font-size-00;
+      }
+    }
+
+    .ais-search-input-field input {
+      font-size: @font-size-0;
+    }
+
+    .ais-prompt-chips .ais-chip {
+      min-width: @size-10;
+      flex: 1 1 auto;
+    }
+  }
+}

package/src/ChatBlock/ChatBlockView.jsx

@@ -13,6 +13,8 @@ function ChatBlockView(props) {
   );
 
   const isPlaywrightTest = query.playwright === 'yes';
+  const initialQuery = query.query || null;
+  const initialDeepResearch = query.deepResearch || null;
 
   useEffect(() => {
     if (isPlaywrightTest) {
@@ -29,6 +31,8 @@ function ChatBlockView(props) {
       isEditMode={isEditMode}
       isPlaywrightTest={isPlaywrightTest}
       block_id={id}
+      initialQuery={initialQuery}
+      initialDeepResearch={initialDeepResearch}
       {...data}
     />
   ) : (

package/src/ChatBlock/chat/ChatWindow.tsx

@@ -5,6 +5,7 @@ import React, {
   useMemo,
   useCallback,
 } from 'react';
+import { useHistory } from 'react-router-dom';
 import type { Persona } from '@eeacms/volto-eea-chatbot/ChatBlock/types/interfaces';
 import { Button, Form, Segment, Checkbox } from 'semantic-ui-react';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
@@ -50,6 +51,8 @@ interface ChatWindowProps {
   maxContextSegments?: number;
   onyxVersion?: '2' | '3';
   isPlaywrightTest?: boolean;
+  initialQuery?: string | null;
+  initialDeepResearch?: string | null;
   [key: string]: any;
 }
 
@@ -61,6 +64,8 @@ function ChatWindow({
   placeholderPrompt = 'Ask a question',
   isEditMode,
   isPlaywrightTest,
+  initialQuery,
+  initialDeepResearch,
   ...data
 }: ChatWindowProps) {
   const {
@@ -124,6 +129,7 @@ function ChatWindow({
 
   const [showLandingPage, setShowLandingPage] = useState(true);
 
+  const history = useHistory();
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const chatWindowRef = useRef(null);
   const chatWindowEndRef = useRef(null);
@@ -132,6 +138,23 @@ function ChatWindow({
     setShowLandingPage(messages.length === 0);
   }, [messages]);
 
+  // Set deep research state from URL parameter
+  useEffect(() => {
+    if (initialDeepResearch !== null && initialDeepResearch !== undefined) {
+      const enabled = initialDeepResearch.toLowerCase() === 'true';
+      setIsDeepResearchEnabled(enabled);
+    }
+  }, []);
+
+  // Auto-submit query from URL parameter on mount
+  useEffect(() => {
+    if (initialQuery && messages.length === 0 && !isStreaming) {
+      onSubmit({ message: initialQuery });
+      setShowLandingPage(false);
+      history.replace(window.location.pathname);
+    }
+  }, []);
+
   const handleStarterPromptChoice = useCallback(
     (message: string) => {
       if (enableMatomoTracking) {

package/src/halloumi/middleware.js

@@ -1,11 +1,19 @@
 // import debug from 'debug';
 import { getVerifyClaimResponse } from './generative';
+import { isPathAllowed } from '../middleware';
 
 // const log = debug('halloumi');
 
 const MSG_INVALID_CONFIGURATION =
   'Invalid configuration: missing LLMGW_TOKEN or LLMGW_URL';
 
+// Allowed paths for _ha (Halloumi) proxy.
+// When adding new endpoints, update this list.
+const ALLOWED_HALLOUMI_PATHS = [
+  { path: '/generate', methods: ['POST'] },
+  { path: '/classify', methods: ['POST'] },
+];
+
 const LLMGW_URL = process.env.LLMGW_URL;
 const LLMGW_TOKEN = process.env.LLMGW_TOKEN;
 
@@ -32,6 +40,14 @@ const classifyModel = {
 export default async function middleware(req, res, next) {
   const path = req.url.replace('/_ha/', '/');
 
+  // Reject paths not on the allowlist — prevents Confused Deputy attacks
+  if (!isPathAllowed(path, req.method, ALLOWED_HALLOUMI_PATHS)) {
+    res.statusCode = 404;
+    res.statusMessage = 'Not Found';
+    res.send({ error: 'Not Found' });
+    return;
+  }
+
   if (!(LLMGW_TOKEN && LLMGW_URL)) {
     res.send({
       error: MSG_INVALID_CONFIGURATION,

package/src/halloumi/middleware.test.js

@@ -1,4 +1,5 @@
 import middleware from './middleware';
+import { isPathAllowed } from '../middleware';
 
 jest.mock('./generative');
 
@@ -8,11 +9,14 @@ describe('halloumi middleware', () => {
   beforeEach(() => {
     req = {
       url: '/_ha/generate',
+      method: 'POST',
       body: {
         sources: ['source1', 'source2'],
         answer: 'test answer',
         maxContextSegments: 3,
       },
+      headers: {},
+      ip: '127.0.0.1',
     };
     res = {
       send: jest.fn(),
@@ -42,28 +46,144 @@ describe('halloumi middleware', () => {
     process.env.LLMGW_URL = origUrl;
   });
 
-  it('calls getVerifyClaimResponse and sends response on success', async () => {
+  it('rejects disallowed paths with 404', async () => {
+    req.url = '/_ha/admin/config';
+    req.method = 'POST';
+
+    await middleware(req, res, next);
+
+    expect(res.statusCode).toBe(404);
+    expect(res.send).toHaveBeenCalledWith({ error: 'Not Found' });
+  });
+
+  it('rejects allowed path with wrong HTTP method', async () => {
+    req.url = '/_ha/generate';
+    req.method = 'GET';
+
+    await middleware(req, res, next);
+
+    expect(res.statusCode).toBe(404);
+    expect(res.send).toHaveBeenCalledWith({ error: 'Not Found' });
+  });
+});
+
+// These tests need a fresh module loaded with env vars set so that
+// LLMGW_TOKEN and LLMGW_URL are defined at module load time,
+// allowing the code to reach getVerifyClaimResponse.
+describe('halloumi middleware - dynamic import', () => {
+  const buildReq = () => ({
+    url: '/_ha/generate',
+    method: 'POST',
+    body: {
+      sources: ['source1', 'source2'],
+      answer: 'test answer',
+      maxContextSegments: 3,
+    },
+    headers: {},
+    ip: '127.0.0.1',
+  });
+
+  const buildRes = () => ({
+    send: jest.fn(),
+    set: jest.fn(),
+    status: jest.fn().mockReturnThis(),
+  });
+
+  it('sends response on successful getVerifyClaimResponse', async () => {
     const origToken = process.env.LLMGW_TOKEN;
     const origUrl = process.env.LLMGW_URL;
     process.env.LLMGW_TOKEN = 'test-token';
     process.env.LLMGW_URL = 'http://test-url';
 
-    // Need to re-import since env vars are read at module level
     jest.resetModules();
-    const genMod = require('./generative');
-    const middlewareMod = require('./middleware').default;
 
-    genMod.getVerifyClaimResponse = jest
+    const mockGetVerifyClaimResponse = jest
       .fn()
       .mockResolvedValue({ claims: [], segments: {} });
 
-    await middlewareMod(req, res, next);
+    jest.setMock('./generative', {
+      getVerifyClaimResponse: mockGetVerifyClaimResponse,
+    });
+
+    const middlewareMod = require('./middleware').default;
+
+    const req = buildReq();
+    const res = buildRes();
 
-    // It may send error if env vars weren't set before module load,
-    // but we verify the middleware doesn't crash
-    expect(res.send).toHaveBeenCalled();
+    await middlewareMod(req, res, jest.fn());
+
+    expect(mockGetVerifyClaimResponse).toHaveBeenCalled();
+    expect(res.set).toHaveBeenCalledWith('Content-Type', 'application/json');
+    expect(res.send).toHaveBeenCalledWith({ claims: [], segments: {} });
 
     process.env.LLMGW_TOKEN = origToken;
     process.env.LLMGW_URL = origUrl;
   });
+
+  it('handles errors from getVerifyClaimResponse', async () => {
+    const origToken = process.env.LLMGW_TOKEN;
+    const origUrl = process.env.LLMGW_URL;
+    process.env.LLMGW_TOKEN = 'test-token';
+    process.env.LLMGW_URL = 'http://test-url';
+
+    jest.resetModules();
+
+    const mockGetVerifyClaimResponse = jest
+      .fn()
+      .mockRejectedValue(new Error('LLM error'));
+
+    jest.setMock('./generative', {
+      getVerifyClaimResponse: mockGetVerifyClaimResponse,
+    });
+
+    const middlewareMod = require('./middleware').default;
+
+    const req = buildReq();
+    const res = buildRes();
+
+    await middlewareMod(req, res, jest.fn());
+
+    expect(res.status).toHaveBeenCalledWith(500);
+    expect(res.send).toHaveBeenCalledWith(
+      expect.objectContaining({ error: expect.stringContaining('LLM error') }),
+    );
+
+    process.env.LLMGW_TOKEN = origToken;
+    process.env.LLMGW_URL = origUrl;
+  });
+});
+
+describe('halloumi path allowlist', () => {
+  // Mirror of ALLOWED_HALLOUMI_PATHS from middleware.js
+  const ALLOWED_HALLOUMI_PATHS = [
+    { path: '/generate', methods: ['POST'] },
+    { path: '/classify', methods: ['POST'] },
+  ];
+
+  it('allows /generate with POST', () => {
+    expect(isPathAllowed('/generate', 'POST', ALLOWED_HALLOUMI_PATHS)).toBe(
+      true,
+    );
+  });
+
+  it('allows /classify with POST', () => {
+    expect(isPathAllowed('/classify', 'POST', ALLOWED_HALLOUMI_PATHS)).toBe(
+      true,
+    );
+  });
+
+  it('rejects /generate with wrong method', () => {
+    expect(isPathAllowed('/generate', 'GET', ALLOWED_HALLOUMI_PATHS)).toBe(
+      false,
+    );
+  });
+
+  it('rejects disallowed paths', () => {
+    expect(isPathAllowed('/admin/config', 'POST', ALLOWED_HALLOUMI_PATHS)).toBe(
+      false,
+    );
+    expect(
+      isPathAllowed('/../../etc/passwd', 'POST', ALLOWED_HALLOUMI_PATHS),
+    ).toBe(false);
+  });
 });

package/src/icons/sparkle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/>
+</svg>

package/src/index.js

@@ -1,4 +1,5 @@
 import installChatBlock from './ChatBlock';
+import installAISearchInputBlock from './AISearchInput';
 import loadable from '@loadable/component';
 
 const applyConfig = (config) => {
@@ -40,6 +41,7 @@ const applyConfig = (config) => {
   };
 
   installChatBlock(config);
+  installAISearchInputBlock(config);
 
   return config;
 };

package/src/middleware.js

@@ -9,6 +9,31 @@ const log = debug('volto-eea-chatbot');
 
 const MOCK_STREAM_DELAY = parseInt(process.env.MOCK_STREAM_DELAY || '0');
 
+// Allowed paths for _da and _rq proxy (shared).
+// When adding new endpoints, update this list.
+const ALLOWED_PROXY_PATHS = [
+  { path: '/persona', methods: ['GET'] },
+  { pathPattern: /^\/persona\/\d+$/, methods: ['GET'] },
+  { path: '/chat/create-chat-session', methods: ['POST'] },
+  { path: '/chat/send-message', methods: ['POST'] },
+  { path: '/chat/send-chat-message', methods: ['POST'] },
+  { path: '/chat/create-chat-message-feedback', methods: ['POST'] },
+];
+
+/**
+ * Check whether a stripped path matches the allowlist.
+ * Strips query strings before comparison.
+ */
+function isPathAllowed(strippedPath, method, allowedPaths) {
+  const cleanPath = strippedPath.split('?')[0];
+  return allowedPaths.some(
+    (entry) =>
+      (entry.path === cleanPath ||
+        (entry.pathPattern && entry.pathPattern.test(cleanPath))) &&
+      entry.methods.includes(method),
+  );
+}
+
 let cached_auth_cookie = null;
 let last_fetched = null;
 let maxAge;
@@ -249,10 +274,19 @@ async function send_onyx_request(
   }
 }
 
+export { isPathAllowed, ALLOWED_PROXY_PATHS };
 export default async function middleware(req, res, next) {
   const is_related_question = req.url.includes('/_rq/');
   const path = req.url.replace('/_da/', '/').replace('/_rq/', '/');
 
+  // Reject paths not on the allowlist — prevents Confused Deputy attacks
+  if (!isPathAllowed(path, req.method, ALLOWED_PROXY_PATHS)) {
+    res.statusCode = 404;
+    res.statusMessage = 'Not Found';
+    res.send({ error: 'Not Found' });
+    return;
+  }
+
   const reqUrl = `${process.env.ONYX_URL || ''}/api${path}`;
 
   const api_key = process.env.ONYX_API_KEY;