Drop EventSource for SSE

* Replaced with a standard fetch() (as IndicoAxios isn't as smooth)
* Split main stylesheet across components
* Add i18n to prompt management components
* Use `load_default` in webargs
* Use indico-url imports

Author: GovernmentPlates

ai_summary/indico_ai_summary/blueprint.py

@@ -14,4 +14,4 @@
 
 blueprint.add_url_rule('/manage-category-prompts/<int:category_id>', 'manage_category_prompts',
                        RHManageCategoryPrompts, methods=('GET', 'POST'))
-blueprint.add_url_rule('/summarize-event/<int:event_id>', 'summarize_event', SummarizeEvent, methods=('GET', 'POST'))
+blueprint.add_url_rule('/summarize-event/<int:event_id>', 'summarize_event', SummarizeEvent, methods=('POST',))

ai_summary/indico_ai_summary/client/CategoryManagePrompts.jsx

@@ -5,6 +5,8 @@
 // them and/or modify them under the terms of the MIT License;
 // see the LICENSE file for more details.
 
+import manageCategoryPrompts from 'indico-url:plugin_ai_summary.manage_category_prompts';
+
 import _ from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -18,10 +20,8 @@ import {FinalPromptManagerField} from './components/PromptManagerField';
 
 export default function CategoryManagePrompts({categoryId, prompts: predefinedPrompts}) {
   const onSubmit = async ({prompts}, form) => {
-    // TODO: url import
-    const url = `/plugin/ai-summary/manage-category-prompts/${categoryId}`;
     try {
-      await indicoAxios.post(url, {prompts});
+      await indicoAxios.post(manageCategoryPrompts({category_id: categoryId}), {prompts});
       form.initialize({prompts});
     } catch (error) {
       handleSubmitError(error);

ai_summary/indico_ai_summary/client/components/ActionButtons.jsx

@@ -9,7 +9,7 @@ import React, {useState, useEffect} from 'react';
 import {Button, ButtonGroup, Icon, Popup} from 'semantic-ui-react';
 import {Translate} from 'indico/react/i18n';
 
-import '../styles/ind_summarize_button.module.scss';
+import './ActionButtons.module.scss';
 
 export default function ActionButtons({loading, error, summaryHtml, saving, onSave, onRetry}) {
 

ai_summary/indico_ai_summary/client/components/ActionButtons.module.scss

@@ -0,0 +1,28 @@
+// This file is part of the Indico plugins.
+// Copyright (C) 2002 - 2025 CERN
+//
+// The Indico plugins are free software; you can redistribute
+// them and/or modify them under the terms of the MIT License;
+// see the LICENSE file for more details.
+
+@use 'base/palette' as *;
+
+.action-buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+
+  .llm-info {
+    color: $dark-gray;
+  }
+}
+
+.action-buttons-container {
+  display: flex;
+  align-items: baseline;
+  gap: 0;
+
+  .save-button {
+    margin-left: 10px;
+  }
+}

ai_summary/indico_ai_summary/client/components/PromptManagerField.jsx

@@ -9,9 +9,12 @@ import _ from 'lodash';
 import React, {useCallback, useMemo, useState} from 'react';
 import ReactDOM from 'react-dom';
 import {Form, TextArea, Button, Input, Card, Icon} from 'semantic-ui-react';
+import {Translate} from 'indico/react/i18n';
 
 import {FinalField} from 'indico/react/forms';
 
+import './PromptManagerField.module.scss';
+
 export function FinalPromptManagerField({submitBtn}) {
   return (
     <FinalField
@@ -52,9 +55,9 @@ export default function PromptManagerField({value, onChange, submitBtn}) {
           onChangeName={name => updateName(idx, name)}
         />
       ))}
-      <div style={{display: 'flex', justifyContent: 'end'}}>
+      <div styleName="add-prompt-buttons">
         <Button icon type="button" labelPosition="right" onClick={addPrompt}>
-          Add Prompt
+            <Translate>Add Prompt</Translate>
           <Icon name="plus" />
         </Button>
         {submitBtn}
@@ -67,24 +70,24 @@ function PromptField({name, text, onChangeName, onChangeText, onRemove}) {
   return (
     <Card fluid>
       <Card.Content>
-        <div style={{display: 'flex', justifyContent: 'end', marginBottom: '-1em'}}>
+        <div styleName="delete-prompt-button">
           <Button icon type="button" compact onClick={onRemove}>
             <Icon name="trash alternate outline" />
           </Button>
         </div>
         <Form.Field>
-          <label>Prompt Name</label>
+          <Translate as="label">Prompt Name</Translate>
           <Input
             value={name}
-            placeholder="e.g. Summarizer..."
+            placeholder={Translate.string('e.g. Summarizer...')}
             onChange={(_, {value: v}) => onChangeName(v)}
           />
         </Form.Field>
         <Form.Field>
-          <label>Prompt Text</label>
+          <Translate as="label">Prompt Text</Translate>
           <TextArea
             value={text}
-            placeholder="Enter your LLM prompt here..."
+            placeholder={Translate.string('Enter your prompt here...')}
             onChange={(_, {value: v}) => onChangeText(v)}
             rows={10}
           />

ai_summary/indico_ai_summary/client/components/PromptManagerField.module.scss

@@ -0,0 +1,17 @@
+// This file is part of the Indico plugins.
+// Copyright (C) 2002 - 2025 CERN
+//
+// The Indico plugins are free software; you can redistribute
+// them and/or modify them under the terms of the MIT License;
+// see the LICENSE file for more details.
+
+.add-prompt-buttons {
+    display: flex;
+    justify-content: end;
+}
+
+.delete-prompt-button {
+    display: flex;
+    justify-content: end;
+    margin-bottom: -1em;
+}

ai_summary/indico_ai_summary/client/components/SummaryPreview.jsx

@@ -11,7 +11,9 @@ import React, {useRef, useEffect} from 'react';
 import {Button, Segment, Header, HeaderSubheader, Icon, Dimmer, Image, Card} from 'semantic-ui-react';
 import {Translate} from 'indico/react/i18n';
 
-import '../styles/ind_summarize_button.module.scss';
+import './SummaryPreview.module.scss';
+import './ActionButtons.module.scss';
+
 import ActionButtons from './ActionButtons';
 
 export default function SummaryPreview({loading, error, summaryHtml, saving, onSave, streamResponse, onRetry, llmInfo}) {

ai_summary/indico_ai_summary/client/styles/ind_summarize_button.module.scss renamed to ai_summary/indico_ai_summary/client/components/SummaryPreview.module.scss

@@ -5,15 +5,6 @@
 // them and/or modify them under the terms of the MIT License;
 // see the LICENSE file for more details.
 
-@use 'base/palette' as *;
-
-.column-divider {
-  box-shadow: none !important;
-  display: flex !important;
-  flex-direction: column;
-  border-left: 1px solid $raincloud-gray;
-}
-
 .preview-card-wrapper {
   flex-grow: 1;
   margin-top: 0 !important;
@@ -27,33 +18,13 @@
       ul li {
         margin-left: 1.5em;
       }
+
       h1, h2, h3 {
         font-size: 1.5em;
       }
   }
 }
 
-.completion-status {
-
-  margin-left: 5px !important;
-
-  .modal-spinner {
-    // SUI modal loader workaround (https://github.com/Semantic-Org/Semantic-UI-React/issues/3133)
-
-    &::before {
-      width: 18px !important;
-      height: 18px !important;
-      border-color: rgba(0,0,0,.1) !important;
-    }
-
-    &::after {
-      width: 18px !important;
-      height: 18px !important;
-      border-color: #767676 transparent transparent !important;
-    }
-  }
-}
-
 .no-preview-placeholder {
   margin-top: 0 !important;
   height: 52.5vh;
@@ -85,7 +56,7 @@
   display: none;
 }
 
-// Hide scrollbar but allow scrolling
+// Hide scrollbar when streaming back the generated summary
 .scrollbar-hidden {
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -131,43 +102,3 @@
     text-align: center;
   }
 }
-
-.placeholder-no-summary{
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  color: rgba(0,0,0,0.5);
-  margin-top: 8em;
-  font-style: italic;
-}
-
-.summarize-button-menu {
-  display: flex;
-  flex-direction: row;
-  padding-bottom: 0;
-
-  img {
-    margin-right: 5px;
-  }
-}
-
-.action-buttons {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-
-  .llm-info {
-    color: $dark-gray;
-  }
-}
-
-.action-buttons-container {
-  display: flex;
-  align-items: baseline;
-  gap: 0;
-
-  .save-button {
-    margin-left: 10px !important;
-  }
-}

ai_summary/indico_ai_summary/client/components/ind_summarize_button.jsx

@@ -14,15 +14,15 @@
 
 import staticURL from 'indico-url:plugin_ai_summary.static';
 
-import React, {useState, useEffect, useContext} from 'react';
+import React, {useState, useEffect} from 'react';
 import ReactDOM from 'react-dom';
 import {Modal, Button, Form, Grid, GridRow, GridColumn, Header, Icon, Loader, Popup} from 'semantic-ui-react';
 import {Translate} from 'indico/react/i18n';
 import {handleAxiosError} from 'indico/utils/axios';
 import {streamSummary, fetchSummary, fetchEventNote, saveSummaryToEvent} from '../services/summarize';
 import {PromptControls, PromptEditor} from './PromptSelector';
 import SummaryPreview from './SummaryPreview';
-import '../styles/ind_summarize_button.module.scss';
+import './ind_summarize_button.module.scss';
 
 function SummarizeButton({categoryId, eventId, storedPrompts, streamResponse, llmInfo}) {
   const [selectedPromptIndex, setSelectedPromptIndex] = useState(0);
@@ -40,7 +40,7 @@ function SummarizeButton({categoryId, eventId, storedPrompts, streamResponse, ll
     // Close any existing stream first
     if (streamCtl) {
       try {
-        streamCtl.close();
+        streamCtl.abort();
       } catch {}
       setStreamCtl(null);
     }
@@ -51,7 +51,7 @@ function SummarizeButton({categoryId, eventId, storedPrompts, streamResponse, ll
 
     if (streamResponse) {
       setStreamStopped(false);
-      // Streaming via SSE
+      // Streaming via indicoAxios
       const ctl = streamSummary(eventId, selectedPrompt.text, {
         onChunk: html => {
           // Replace each time with server snapshot
@@ -92,7 +92,7 @@ function SummarizeButton({categoryId, eventId, storedPrompts, streamResponse, ll
   const stopStreaming = () => {
     if (streamCtl) {
       try {
-        streamCtl.close();
+        streamCtl.abort();
       } catch {}
       setStreamCtl(null);
     }
@@ -104,7 +104,7 @@ function SummarizeButton({categoryId, eventId, storedPrompts, streamResponse, ll
   useEffect(() => () => {
     if (streamCtl) {
       try {
-        streamCtl.close();
+        streamCtl.abort();
       } catch {}
     }
   }, [streamCtl]);
@@ -189,7 +189,7 @@ function SummarizeButton({categoryId, eventId, storedPrompts, streamResponse, ll
           // Ensure any active stream is closed when modal is closed
           if (streamCtl) {
             try {
-              streamCtl.close();
+              streamCtl.abort();
             } catch {}
             setStreamCtl(null);
           }
@@ -244,7 +244,11 @@ function SummarizeButton({categoryId, eventId, storedPrompts, streamResponse, ll
                         />
                       )}
                       {!loading && !error && !streamStopped && summaryHtml && (
-                        <Icon name="check circle outline" color="green" />
+                        <Popup
+                          trigger={<Icon name="check circle outline" color="green" />}
+                          content={Translate.string('Response complete')}
+                          position="top center"
+                        />
                       )}
                     </span>
                   </Header>

ai_summary/indico_ai_summary/client/components/ind_summarize_button.module.scss

@@ -0,0 +1,45 @@
+// This file is part of the Indico plugins.
+// Copyright (C) 2002 - 2025 CERN
+//
+// The Indico plugins are free software; you can redistribute
+// them and/or modify them under the terms of the MIT License;
+// see the LICENSE file for more details.
+
+@use 'base/palette' as *;
+
+.column-divider {
+  box-shadow: none !important;
+  display: flex !important;
+  flex-direction: column;
+  border-left: 1px solid $raincloud-gray;
+}
+
+.completion-status {
+  margin-left: 5px !important;
+
+  .modal-spinner {
+    // SUI modal loader workaround (https://github.com/Semantic-Org/Semantic-UI-React/issues/3133)
+
+    &::before {
+      width: 18px !important;
+      height: 18px !important;
+      border-color: rgba(0,0,0,.1) !important;
+    }
+
+    &::after {
+      width: 18px !important;
+      height: 18px !important;
+      border-color: #767676 transparent transparent !important;
+    }
+  }
+}
+
+.summarize-button-menu {
+  display: flex;
+  flex-direction: row;
+  padding-bottom: 0;
+
+  img {
+    margin-right: 5px;
+  }
+}