@eeacms/volto-eea-chatbot 2.0.5 → 3.0.0

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.',
+  },
+});

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'],
+  };
+}