@eeacms/volto-eea-chatbot 2.0.5 → 3.0.1

package/src/AISearchInput/schema.jsx

@@ -0,0 +1,215 @@
+import messages from './messages';
+
+export function AISearchInputSchema({ intl, data }) {
+  return {
+    title: intl.formatMessage(messages.aiSearchInput),
+    fieldsets: [
+      {
+        id: 'default',
+        title: intl.formatMessage({
+          id: 'Default',
+          defaultMessage: 'Default',
+        }),
+        fields: [
+          'assistantEndpoint',
+          'blockTitle',
+          'introText',
+          'showIcon',
+          'placeholderText',
+          'examplePromptsEnabled',
+          ...(data.examplePromptsEnabled ? ['examplePrompts'] : []),
+          'deepResearch',
+          'disclaimerText',
+          'stylingVariant',
+        ],
+      },
+    ],
+    properties: {
+      assistantEndpoint: {
+        title: intl.formatMessage({
+          id: 'Assistant page URL',
+          defaultMessage: 'Assistant page URL',
+        }),
+        description: intl.formatMessage({
+          id: 'URL of the Plone page that contains the AI Chatbot block (e.g. /ai-assistant).',
+          defaultMessage:
+            'URL of the Plone page that contains the AI Chatbot block (e.g. /ai-assistant).',
+        }),
+        widget: 'url',
+        type: 'string',
+      },
+      blockTitle: {
+        title: intl.formatMessage({
+          id: 'Block title',
+          defaultMessage: 'Block title',
+        }),
+        description: intl.formatMessage({
+          id: 'Optional title displayed inline with the icon.',
+          defaultMessage: 'Optional title displayed inline with the icon.',
+        }),
+        type: 'string',
+      },
+      introText: {
+        title: intl.formatMessage({
+          id: 'Introductory text',
+          defaultMessage: 'Introductory text',
+        }),
+        description: intl.formatMessage({
+          id: 'Help text shown next to the icon and title.',
+          defaultMessage: 'Help text shown next to the icon and title.',
+        }),
+        widget: 'slate',
+      },
+      showIcon: {
+        title: intl.formatMessage({
+          id: 'Show icon',
+          defaultMessage: 'Show icon',
+        }),
+        type: 'boolean',
+        default: true,
+      },
+      placeholderText: {
+        title: intl.formatMessage({
+          id: 'Placeholder text',
+          defaultMessage: 'Placeholder text',
+        }),
+        type: 'string',
+        default: intl.formatMessage(messages.askYourQuestion),
+      },
+      examplePromptsEnabled: {
+        title: intl.formatMessage({
+          id: 'Show example prompts',
+          defaultMessage: 'Show example prompts',
+        }),
+        type: 'boolean',
+        default: false,
+        description: intl.formatMessage({
+          id: 'When enabled, editors can define clickable prompt chips below the input.',
+          defaultMessage:
+            'When enabled, editors can define clickable prompt chips below the input.',
+        }),
+      },
+      examplePrompts: {
+        title: intl.formatMessage({
+          id: 'Example prompts',
+          defaultMessage: 'Example prompts',
+        }),
+        widget: 'object_list',
+        schema: {
+          title: intl.formatMessage({
+            id: 'Prompt',
+            defaultMessage: 'Prompt',
+          }),
+          fieldsets: [
+            {
+              id: 'default',
+              title: intl.formatMessage({
+                id: 'Default',
+                defaultMessage: 'Default',
+              }),
+              fields: ['label', 'message'],
+            },
+          ],
+          properties: {
+            label: {
+              title: intl.formatMessage({
+                id: 'Label',
+                defaultMessage: 'Label',
+              }),
+              description: intl.formatMessage({
+                id: 'Text displayed on the chip button.',
+                defaultMessage: 'Text displayed on the chip button.',
+              }),
+            },
+            message: {
+              title: intl.formatMessage({
+                id: 'Message',
+                defaultMessage: 'Message',
+              }),
+              type: 'string',
+              description: intl.formatMessage({
+                id: 'Optional — the actual query sent when clicked. If empty, uses the label.',
+                defaultMessage:
+                  'Optional — the actual query sent when clicked. If empty, uses the label.',
+              }),
+            },
+          },
+          required: ['label'],
+        },
+      },
+      deepResearch: {
+        title: intl.formatMessage(messages.deepResearch),
+        choices: [
+          [
+            'unavailable',
+            intl.formatMessage({
+              id: 'Unavailable',
+              defaultMessage: 'Unavailable',
+            }),
+          ],
+          [
+            'always_on',
+            intl.formatMessage({
+              id: 'Always on',
+              defaultMessage: 'Always on',
+            }),
+          ],
+          [
+            'user_on',
+            intl.formatMessage({
+              id: 'User choice, on by default',
+              defaultMessage: 'User choice, on by default',
+            }),
+          ],
+          [
+            'user_off',
+            intl.formatMessage({
+              id: 'User choice, off by default',
+              defaultMessage: 'User choice, off by default',
+            }),
+          ],
+        ],
+        default: 'unavailable',
+      },
+      disclaimerText: {
+        title: intl.formatMessage({
+          id: 'Disclaimer text',
+          defaultMessage: 'Disclaimer text',
+        }),
+        widget: 'slate',
+        description: intl.formatMessage({
+          id: 'AI transparency text. Always displayed at the bottom of the block.',
+          defaultMessage:
+            'AI transparency text. Always displayed at the bottom of the block.',
+        }),
+        default: [
+          {
+            type: 'p',
+            children: [
+              { text: intl.formatMessage(messages.defaultDisclaimer) },
+            ],
+          },
+        ],
+      },
+      stylingVariant: {
+        title: intl.formatMessage({
+          id: 'Styling variant',
+          defaultMessage: 'Styling variant',
+        }),
+        choices: [
+          ['dark', intl.formatMessage({ id: 'Dark', defaultMessage: 'Dark' })],
+          [
+            'light',
+            intl.formatMessage({ id: 'Light', defaultMessage: 'Light' }),
+          ],
+          [
+            'accent',
+            intl.formatMessage({ id: 'Accent', defaultMessage: 'Accent' }),
+          ],
+        ],
+        default: 'dark',
+      },
+    },
+    required: ['assistantEndpoint'],
+  };
+}

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/ChatBlock/packets/MultiToolRenderer.tsx

@@ -133,7 +133,14 @@ export function MultiToolRenderer({
               {filteredToolGroups.map((toolGroup, index) => {
                 const isLastItem = index === filteredToolGroups.length - 1;
                 const toolState = toolStates.get(toolGroup.ind);
-                const isToolCompleted = toolState?.isCompleted;
+                const isToolCompleted = toolState?.isCompleted === true;
+                const isToolActive =
+                  isOverallStreaming && !isToolCompleted && isLastItem;
+                const toolDisplayState = isToolActive
+                  ? 'active'
+                  : isToolCompleted
+                    ? 'completed'
+                    : 'pending';
 
                 return (
                   <div
@@ -141,6 +148,8 @@ export function MultiToolRenderer({
                     className={cx({
                       'tool-collapsed-wrapper': isOverallStreaming,
                     })}
+                    data-state={toolDisplayState}
+                    aria-current={isToolActive ? 'step' : undefined}
                   >
                     <RendererComponent
                       packets={toolGroup.packets}
@@ -158,12 +167,7 @@ export function MultiToolRenderer({
                         const finalIcon = icon ? (
                           React.createElement(icon, { size: 14 })
                         ) : (
-                          <span
-                            className={cx({
-                              'tool-icon-dot': isOverallStreaming,
-                              'tool-icon-default': !isOverallStreaming,
-                            })}
-                          />
+                          <span className="tool-icon-dot" />
                         );
 
                         // If tool is not completed and we are overall streaming, show collapsed view
@@ -184,14 +188,14 @@ export function MultiToolRenderer({
                             return (
                               <div
                                 className={cx('tool-item-collapsed', {
-                                  active: isLastItem,
+                                  active: isToolActive,
                                   completed: isToolCompleted,
                                 })}
                               >
                                 <div className="tool-collapsed-icon">
                                   {finalIcon}
                                 </div>
-                                <span className="tool-collapsed-status">
+                                <span className="tool-status tool-collapsed-status">
                                   {status}
                                 </span>
                               </div>
@@ -199,9 +203,14 @@ export function MultiToolRenderer({
                           }
                         }
 
-                        // Expanded view (full content) - used for completed tools or when overall complete
+                        // Detailed view for streaming reasoning/search tools and completed tools
                         return (
-                          <div className="tool-item-expanded">
+                          <div
+                            className={cx('tool-item-expanded', {
+                              active: isToolActive,
+                              completed: isToolCompleted,
+                            })}
+                          >
                             <div className="tool-connector-line" />
 
                             <div className="tool-item-row">