@eeacms/volto-eea-chatbot 2.0.5 → 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/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;
 };