@eeacms/volto-eea-chatbot 2.0.5 → 3.0.1

package/locales/it/LC_MESSAGES/volto.po

@@ -11,4 +11,48 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#. Default: "AI Search Input"
+#: AISearchInput/messages
+msgid "AI Search Input"
+msgstr ""
+
+#. Default: "Ask your question..."
+#: AISearchInput/components/SearchInput
+#: AISearchInput/messages
+msgid "Ask your question..."
+msgstr ""
+
+#. Default: "Assistant page is not configured. Please contact the site administrator."
+#: AISearchInput/AISearchInputView
+#: AISearchInput/messages
+msgid "Assistant page is not configured. Please contact the site administrator."
+msgstr ""
+
+#. Default: "Deep research"
+#: AISearchInput/components/DeepResearchToggle
+#: AISearchInput/messages
+msgid "Deep research"
+msgstr ""
 
+#. Default: "Deep research on"
+#: AISearchInput/components/DeepResearchToggle
+#: AISearchInput/messages
+msgid "Deep research on"
+msgstr ""
+
+#. Default: "Invalid assistant page URL."
+#: AISearchInput/AISearchInputView
+#: AISearchInput/messages
+msgid "Invalid assistant page URL."
+msgstr ""
+
+#. Default: "Submit question"
+#: AISearchInput/components/SearchInput
+#: AISearchInput/messages
+msgid "Submit question"
+msgstr ""
+
+#. Default: "This assistant uses AI. Responses may contain inaccuracies."
+#: AISearchInput/messages
+msgid "This assistant uses AI. Responses may contain inaccuracies."
+msgstr ""

package/locales/ro/LC_MESSAGES/volto.po

@@ -11,4 +11,48 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#. Default: "AI Search Input"
+#: AISearchInput/messages
+msgid "AI Search Input"
+msgstr ""
+
+#. Default: "Ask your question..."
+#: AISearchInput/components/SearchInput
+#: AISearchInput/messages
+msgid "Ask your question..."
+msgstr ""
+
+#. Default: "Assistant page is not configured. Please contact the site administrator."
+#: AISearchInput/AISearchInputView
+#: AISearchInput/messages
+msgid "Assistant page is not configured. Please contact the site administrator."
+msgstr ""
+
+#. Default: "Deep research"
+#: AISearchInput/components/DeepResearchToggle
+#: AISearchInput/messages
+msgid "Deep research"
+msgstr ""
 
+#. Default: "Deep research on"
+#: AISearchInput/components/DeepResearchToggle
+#: AISearchInput/messages
+msgid "Deep research on"
+msgstr ""
+
+#. Default: "Invalid assistant page URL."
+#: AISearchInput/AISearchInputView
+#: AISearchInput/messages
+msgid "Invalid assistant page URL."
+msgstr ""
+
+#. Default: "Submit question"
+#: AISearchInput/components/SearchInput
+#: AISearchInput/messages
+msgid "Submit question"
+msgstr ""
+
+#. Default: "This assistant uses AI. Responses may contain inaccuracies."
+#: AISearchInput/messages
+msgid "This assistant uses AI. Responses may contain inaccuracies."
+msgstr ""

package/locales/volto.pot

@@ -1,16 +1,60 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-06-28T10:48:22.678Z\n"
+"POT-Creation-Date: 2026-07-07T08:22:35.802Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
-"MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=1; plural=0;\n"
+"MIME-Version: 1.0\n"
 "Language-Code: en\n"
 "Language-Name: English\n"
 "Preferred-Encodings: utf-8\n"
 "Domain: volto\n"
 
+#. Default: "AI Search Input"
+#: AISearchInput/messages
+msgid "AI Search Input"
+msgstr ""
+
+#. Default: "Ask your question..."
+#: AISearchInput/components/SearchInput
+#: AISearchInput/messages
+msgid "Ask your question..."
+msgstr ""
+
+#. Default: "Assistant page is not configured. Please contact the site administrator."
+#: AISearchInput/AISearchInputView
+#: AISearchInput/messages
+msgid "Assistant page is not configured. Please contact the site administrator."
+msgstr ""
+
+#. Default: "Deep research"
+#: AISearchInput/components/DeepResearchToggle
+#: AISearchInput/messages
+msgid "Deep research"
+msgstr ""
+
+#. Default: "Deep research on"
+#: AISearchInput/components/DeepResearchToggle
+#: AISearchInput/messages
+msgid "Deep research on"
+msgstr ""
+
+#. Default: "Invalid assistant page URL."
+#: AISearchInput/AISearchInputView
+#: AISearchInput/messages
+msgid "Invalid assistant page URL."
+msgstr ""
+
+#. Default: "Submit question"
+#: AISearchInput/components/SearchInput
+#: AISearchInput/messages
+msgid "Submit question"
+msgstr ""
 
+#. Default: "This assistant uses AI. Responses may contain inaccuracies."
+#: AISearchInput/messages
+msgid "This assistant uses AI. Responses may contain inaccuracies."
+msgstr ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-chatbot",
-  "version": "2.0.5",
+  "version": "3.0.1",
   "description": "@eeacms/volto-eea-chatbot: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -40,6 +40,7 @@
     "typescript": "^5.7.3"
   },
   "dependencies": {
+    "@eeacms/volto-design-tokens": "*",
     "@eeacms/volto-matomo": "*",
     "@microsoft/fetch-event-source": "2.0.1",
     "@plone-collective/volto-sentry": "*",

package/src/AISearchInput/AISearchInputEdit.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+
+import AISearchInputView from './AISearchInputView';
+import { AISearchInputSchema } from './schema';
+
+const AISearchInputEdit = (props) => {
+  const { onChangeBlock, block, data } = props;
+  const intl = useIntl();
+
+  const schema = React.useMemo(
+    () => AISearchInputSchema({ intl, data }),
+    [data, intl],
+  );
+
+  return (
+    <div>
+      <AISearchInputView {...props} isEditMode />
+      <SidebarPortal selected={props.selected}>
+        <BlockDataForm
+          schema={schema}
+          title={schema.title}
+          block={block}
+          onChangeBlock={onChangeBlock}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, { ...data, [id]: value });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </div>
+  );
+};
+
+export default AISearchInputEdit;

package/src/AISearchInput/AISearchInputView.jsx

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+import { trackEvent } from '@eeacms/volto-matomo/utils';
+
+import IntroHeader from './components/IntroHeader';
+import SearchInput from './components/SearchInput';
+import PromptChips from './components/PromptChips';
+import DeepResearchToggle from './components/DeepResearchToggle';
+import DisclaimerText from './components/DisclaimerText';
+
+import './styles.less';
+
+const AISearchInputView = ({ data }) => {
+  const history = useHistory();
+  const [query, setQuery] = useState('');
+  const [error, setError] = useState(null);
+  const [deepResearchEnabled, setDeepResearchEnabled] = useState(
+    data.deepResearch === 'always_on' || data.deepResearch === 'user_on',
+  );
+
+  const variant = data.stylingVariant || 'dark';
+
+  const handleSubmit = (message) => {
+    setError(null);
+    const q = (message || query).trim();
+
+    if (!q) return;
+
+    if (!data.assistantEndpoint) {
+      setError(
+        <FormattedMessage
+          id="Assistant page is not configured. Please contact the site administrator."
+          defaultMessage="Assistant page is not configured. Please contact the site administrator."
+        />,
+      );
+      return;
+    }
+
+    // Build target URL
+    let targetUrl;
+    try {
+      targetUrl = new URL(data.assistantEndpoint, window.location.origin);
+    } catch {
+      setError(
+        <FormattedMessage
+          id="Invalid assistant page URL."
+          defaultMessage="Invalid assistant page URL."
+        />,
+      );
+      return;
+    }
+
+    targetUrl.searchParams.set('query', q);
+    if (data.deepResearch !== 'unavailable') {
+      targetUrl.searchParams.set(
+        'deepResearch',
+        deepResearchEnabled ? 'true' : 'false',
+      );
+    }
+
+    const targetString = targetUrl.pathname + targetUrl.search;
+
+    // Matomo tracking
+    trackEvent({
+      category: 'Chatbot',
+      action: 'AI Search Input: Question submitted',
+      name: q.substring(0, 100),
+    });
+
+    // Navigate: client-side for same-origin, full for external
+    if (targetUrl.origin === window.location.origin) {
+      history.push(targetString);
+    } else {
+      window.location.href = targetUrl.toString();
+    }
+  };
+
+  const handleChipSelect = (message) => {
+    handleSubmit(message);
+  };
+
+  return (
+    <div className={`ais-search-input ais-${variant}`}>
+      <IntroHeader
+        showIcon={data.showIcon}
+        blockTitle={data.blockTitle}
+        introText={data.introText}
+      />
+
+      <SearchInput
+        placeholderText={data.placeholderText || 'Ask your question...'}
+        onSubmit={() => handleSubmit()}
+        value={query}
+        onChange={(value) => {
+          setQuery(value);
+          setError(null);
+        }}
+        error={error}
+      />
+
+      {(data.examplePromptsEnabled && data.examplePrompts) ||
+      data.deepResearch !== 'unavailable' ? (
+        <div className="ais-controls-row">
+          {data.examplePromptsEnabled && data.examplePrompts && (
+            <PromptChips
+              prompts={data.examplePrompts}
+              onSelect={handleChipSelect}
+            />
+          )}
+          <DeepResearchToggle
+            mode={data.deepResearch}
+            enabled={deepResearchEnabled}
+            onChange={setDeepResearchEnabled}
+          />
+        </div>
+      ) : (
+        <DeepResearchToggle
+          mode={data.deepResearch}
+          enabled={deepResearchEnabled}
+          onChange={setDeepResearchEnabled}
+        />
+      )}
+
+      <DisclaimerText disclaimerText={data.disclaimerText} />
+    </div>
+  );
+};
+
+export default AISearchInputView;

package/src/AISearchInput/components/DeepResearchToggle.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+const DeepResearchToggle = ({ mode, enabled, onChange }) => {
+  if (mode === 'unavailable' || !mode) return null;
+
+  if (mode === 'always_on') {
+    return (
+      <div className="ais-deep-research">
+        <small className="ais-deep-research-label">
+          <FormattedMessage
+            id="Deep research on"
+            defaultMessage="Deep research on"
+          />
+        </small>
+      </div>
+    );
+  }
+
+  return (
+    <div className="ais-deep-research">
+      <label className="ais-toggle">
+        <input
+          type="checkbox"
+          checked={enabled}
+          onChange={(e) => onChange(e.target.checked)}
+        />
+        <span className="ais-toggle-slider" />
+        <FormattedMessage id="Deep research" defaultMessage="Deep research" />
+      </label>
+    </div>
+  );
+};
+
+export default DeepResearchToggle;

package/src/AISearchInput/components/DisclaimerText.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
+
+const DisclaimerText = ({ disclaimerText }) => {
+  if (!disclaimerText) return null;
+
+  return <div className="ais-disclaimer">{serializeNodes(disclaimerText)}</div>;
+};
+
+export default DisclaimerText;

package/src/AISearchInput/components/IntroHeader.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import SVGIcon from '@eeacms/volto-eea-chatbot/ChatBlock/components/Icon';
+import SparkleIcon from '@eeacms/volto-eea-chatbot/icons/sparkle.svg';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
+
+const IntroHeader = ({ showIcon, blockTitle, introText }) => {
+  if (!showIcon && !blockTitle && !introText) return null;
+
+  return (
+    <div className="ais-intro-header">
+      {showIcon && (
+        <SVGIcon name={SparkleIcon} size={20} className="ais-icon" />
+      )}
+      <div className="ais-intro-content">
+        {blockTitle && <span className="ais-block-title">{blockTitle}</span>}
+        {introText && (
+          <div className="ais-intro-slate">{serializeNodes(introText)}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default IntroHeader;

package/src/AISearchInput/components/PromptChips.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const PromptChips = ({ prompts, onSelect }) => {
+  if (!prompts || prompts.length === 0) return null;
+
+  return (
+    <div className="ais-prompt-chips">
+      {prompts.map((prompt, index) => (
+        <button
+          key={index}
+          type="button"
+          className="ais-chip"
+          onClick={() => onSelect(prompt.message || prompt.label)}
+        >
+          {prompt.label}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default PromptChips;

package/src/AISearchInput/components/SearchInput.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import SVGIcon from '@eeacms/volto-eea-chatbot/ChatBlock/components/Icon';
+import SendIcon from '@eeacms/volto-eea-chatbot/icons/send.svg';
+
+const SearchInput = ({ placeholderText, onSubmit, value, onChange, error }) => {
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      onSubmit();
+    }
+  };
+
+  return (
+    <div className="ais-search-input-field">
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholderText}
+        aria-label={
+          <FormattedMessage
+            id="Ask your question..."
+            defaultMessage="Ask your question..."
+          />
+        }
+        aria-invalid={!!error}
+        aria-describedby={error ? 'ais-input-error' : undefined}
+      />
+      <button
+        type="button"
+        onClick={onSubmit}
+        className="ais-submit-btn"
+        aria-label={
+          <FormattedMessage
+            id="Submit question"
+            defaultMessage="Submit question"
+          />
+        }
+      >
+        <SVGIcon name={SendIcon} size={24} />
+      </button>
+      {error && (
+        <div id="ais-input-error" className="ais-input-error" role="alert">
+          {error}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SearchInput;

package/src/AISearchInput/index.js

@@ -0,0 +1,32 @@
+import sparkleSVG from '@eeacms/volto-eea-chatbot/icons/sparkle.svg';
+import AISearchInputView from './AISearchInputView';
+import AISearchInputEdit from './AISearchInputEdit';
+import { AISearchInputSchema } from './schema';
+
+export default function installAISearchInputBlock(config) {
+  config.blocks.blocksConfig.eeaAISearchInput = {
+    id: 'eeaAISearchInput',
+    title: 'AI Search Input',
+    icon: sparkleSVG,
+    group: 'common',
+    view: AISearchInputView,
+    edit: AISearchInputEdit,
+    restricted: ({ user }) => {
+      if (user?.roles) {
+        return !user.roles.find((role) => role === 'Manager');
+      }
+      return false;
+    },
+    mostUsed: false,
+    blockHasOwnFocusManagement: false,
+    sidebarTab: 1,
+    schema: AISearchInputSchema,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    variations: [],
+  };
+
+  return config;
+}

package/src/AISearchInput/messages.js

@@ -0,0 +1,38 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  aiSearchInput: {
+    id: 'AI Search Input',
+    defaultMessage: 'AI Search Input',
+  },
+  askYourQuestion: {
+    id: 'Ask your question...',
+    defaultMessage: 'Ask your question...',
+  },
+  submit: {
+    id: 'Submit question',
+    defaultMessage: 'Submit question',
+  },
+  deepResearch: {
+    id: 'Deep research',
+    defaultMessage: 'Deep research',
+  },
+  deepResearchOn: {
+    id: 'Deep research on',
+    defaultMessage: 'Deep research on',
+  },
+  defaultDisclaimer: {
+    id: 'This assistant uses AI. Responses may contain inaccuracies.',
+    defaultMessage:
+      'This assistant uses AI. Responses may contain inaccuracies.',
+  },
+  noEndpointError: {
+    id: 'Assistant page is not configured. Please contact the site administrator.',
+    defaultMessage:
+      'Assistant page is not configured. Please contact the site administrator.',
+  },
+  invalidEndpointError: {
+    id: 'Invalid assistant page URL.',
+    defaultMessage: 'Invalid assistant page URL.',
+  },
+});