Documentation for Doc Summarization feature

lib/docs/admin/ui-configuration.md

@@ -23,7 +23,10 @@ The following features can be managed:
 5. Contextual Document Management
     - Control the ability to upload in-context documents
 
-6. System Banner Customization
+6. Document Summarization
+   - Control the ability to access the document summarization feature
+
+7. System Banner Customization
     - Toggle banner visibility
     - Edit banner text
     - Customize text color

lib/docs/user/chat.md

@@ -1,8 +1,43 @@
-
-# Chatbot Example
+# LISA Chat
 
 This repository include an example chatbot web application. The react based web application can be optionally deployed to demonstrate the capabilities of LISA Serve. The chatbot consists of a static react based single page application hosted via API GW S3 proxy integration. The app connects to the LISA Serve REST API and an optional RAG API. The app integrates with an OIDC compatible IdP and allows users to interact directly with any of the textgen models hosted with LISA Serve. If the optional RAG stack is deployed then users can also leverage the embeddings models and AWS OpenSearch or PGVector to demonstrate chat with RAG. Chat sessions are maintained in dynamodb table and a number of parameters are exposed through the UI to allow experimentation with various parameters including prompt, temperature, top k, top p, max tokens, and more.
 
+## Key Features
+
+### Document Summarization Feature
+
+The Document Summarization feature enables efficient document processing through LISA's non-RAG context functionality. Users can streamline their workflow via an intuitive modal interface that facilitates document upload, LLM selection, and customized summarization template configuration. The system generates comprehensive document summaries tailored to specific requirements.
+
+#### Core Components
+- Document upload interface
+- Environment-specific LLM integration
+- Configurable summarization templates with customizable parameters
+- Context-preserving file processing
+
+#### Operational Workflow
+1. Initiate summarization from active chat session
+2. Upload target document for processing
+3. Select appropriate LLM based on requirements
+4. Configure summarization parameters via template selection/modification
+5. Determine session continuity preference
+6. Execute summarization request
+7. Review generated summary in chat interface
+
+#### Key Benefits
+- Efficient information extraction and processing
+- Flexible summarization parameters for diverse use cases
+- Intuitive user interface optimized for accessibility
+- Enhanced contextual accuracy through preserved document integrity
+
+#### Administrative Configuration
+LLM availability within the summarization modal requires summarization flagging and proper model configuration during initial setup. Selected LLMs must meet minimum requirements for:
+
+- Context window capacity
+- Token limit specifications
+- Adequate hosting resource allocation
+
+These parameters ensure optimal document parsing and request processing capabilities.
+
 ## Local development
 
 ### Configuring Pre-Commit Hooks

lib/user-interface/react/src/App.tsx

@@ -31,7 +31,8 @@ import ModelManagement from './pages/ModelManagement';
 import NotificationBanner from './shared/notification/notification';
 import ConfirmationModal, { ConfirmationModalProps } from './shared/modal/confirmation-modal';
 import Configuration from './pages/Configuration';
-import { useGetConfigurationQuery } from './shared/reducers/configuration.reducer';
+import { useLazyGetConfigurationQuery } from './shared/reducers/configuration.reducer';
+import { IConfiguration } from './shared/model/configuration.model';
 
 const PrivateRoute = ({ children }) => {
     const auth = useAuth();
@@ -60,7 +61,19 @@ function App () {
     const [showNavigation, setShowNavigation] = useState(false);
     const [nav, setNav] = useState(null);
     const confirmationModal: ConfirmationModalProps = useAppSelector((state) => state.modal.confirmationModal);
-    const { data: config } = useGetConfigurationQuery('global', {refetchOnMountOrArgChange: 5});
+    const auth = useAuth();
+    const [getConfiguration] = useLazyGetConfigurationQuery();
+    const [config, setConfig] = useState<IConfiguration>();
+
+    useEffect(() => {
+        if (!auth.isLoading && auth.isAuthenticated) {
+            getConfiguration('global').then((resp) => {
+                if (resp.data && resp.data.length > 0) {
+                    setConfig(resp.data[0]);
+                }
+            });
+        }
+    }, [auth, getConfiguration]);
 
     useEffect(() => {
         if (nav) {
@@ -73,10 +86,10 @@ function App () {
     const baseHref = document?.querySelector('base')?.getAttribute('href')?.replace(/\/$/, '');
     return (
         <HashRouter basename={baseHref}>
-            {config && config[0]?.configuration.systemBanner.isEnabled && <SystemBanner position='TOP' />}
+            {config?.configuration.systemBanner.isEnabled && <SystemBanner position='TOP' />}
             <div
                 id='h'
-                style={{ position: 'sticky', top: 0, paddingTop: config && config[0]?.configuration.systemBanner.isEnabled ? '1.5em' : 0, zIndex: 1002 }}
+                style={{ position: 'sticky', top: 0, paddingTop: config?.configuration.systemBanner.isEnabled ? '1.5em' : 0, zIndex: 1002 }}
             >
                 <Topbar />
             </div>
@@ -128,7 +141,7 @@ function App () {
                 }
             />
             {confirmationModal && <ConfirmationModal {...confirmationModal} />}
-            {config && config[0]?.configuration.systemBanner.isEnabled && <SystemBanner position='BOTTOM' />}
+            {config?.configuration.systemBanner.isEnabled && <SystemBanner position='BOTTOM' />}
         </HashRouter>
     );
 }

lib/user-interface/react/src/components/chatbot/Chat.tsx

@@ -37,10 +37,7 @@ import { ContextUploadModal, RagUploadModal } from './FileUploadModals';
 import { ChatOpenAI } from '@langchain/openai';
 import { useGetAllModelsQuery } from '../../shared/reducers/model-management.reducer';
 import { IModel, ModelStatus, ModelType } from '../../shared/model/model-management.model';
-import {
-    configurationApi,
-    useLazyGetConfigurationQuery
-} from '../../shared/reducers/configuration.reducer';
+import { useLazyGetConfigurationQuery } from '../../shared/reducers/configuration.reducer';
 import {
     useGetSessionHealthQuery,
     useLazyGetSessionByIdQuery,
@@ -72,7 +69,6 @@ export default function Chat ({ sessionId }) {
     const [config, setConfig] = useState<IConfiguration>();
     const [chatConfiguration, setChatConfiguration] = useState<IChatConfiguration>(baseConfig);
 
-
     const [userPrompt, setUserPrompt] = useState('');
     const [fileContext, setFileContext] = useState('');
 
@@ -321,9 +317,6 @@ export default function Chat ({ sessionId }) {
                 updateSession(session);
             }
         }
-        if (auth.isAuthenticated){
-            dispatch(configurationApi.util.invalidateTags(['configuration']));
-        }
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isRunning, session, auth]);
 
@@ -636,27 +629,27 @@ export default function Chat ({ sessionId }) {
                                                         iconName: 'settings',
                                                         text: 'Session configuration'
                                                     },
-                                                    ...(config && config.configuration.enabledComponents.uploadRagDocs && window.env.RAG_ENABLED ?
+                                                    ...(config?.configuration.enabledComponents.uploadRagDocs && window.env.RAG_ENABLED ?
                                                         [{
                                                             type: 'icon-button',
                                                             id: 'upload-to-rag',
                                                             iconName: 'upload',
                                                             text: 'Upload to RAG'
                                                         }] : []),
-                                                    ...(config && config.configuration.enabledComponents.uploadContextDocs ?
+                                                    ...(config?.configuration.enabledComponents.uploadContextDocs ?
                                                         [{
                                                             type: 'icon-button',
                                                             id: 'add-file-to-context',
                                                             iconName: 'insert-row',
                                                             text: 'Add file to context'
                                                         }] : []),
-                                                    ...(config && config.configuration.enabledComponents.documentSummarization ? [{
+                                                    ...(config?.configuration.enabledComponents.documentSummarization ? [{
                                                         type: 'icon-button',
                                                         id: 'summarize-document',
                                                         iconName: 'transcript',
                                                         text: 'Summarize Document'
                                                     }] : []),
-                                                    ...(config && config.configuration.enabledComponents.editPromptTemplate ?
+                                                    ...(config?.configuration.enabledComponents.editPromptTemplate ?
                                                         [{
                                                             type: 'menu-dropdown',
                                                             id: 'more-actions',

lib/user-interface/react/src/components/chatbot/Sessions.tsx

@@ -24,7 +24,7 @@ import Button from '@cloudscape-design/components/button';
 import { DateTime } from 'luxon';
 import { useCollection } from '@cloudscape-design/collection-hooks';
 import { v4 as uuidv4 } from 'uuid';
-import { useGetConfigurationQuery } from '../../shared/reducers/configuration.reducer';
+import { useLazyGetConfigurationQuery } from '../../shared/reducers/configuration.reducer';
 import {
     sessionApi,
     useDeleteAllSessionsForUserMutation,
@@ -34,15 +34,19 @@ import {
 import { useAppDispatch } from '../../config/store';
 import { useNotificationService } from '../../shared/util/hooks';
 import { useEffect, useState } from 'react';
+import { useAuth } from 'react-oidc-context';
+import { IConfiguration } from '../../shared/model/configuration.model';
 
 export function Sessions () {
     const dispatch = useAppDispatch();
     const notificationService = useNotificationService(dispatch);
+    const auth = useAuth();
 
     const [selectedItems, setSelectedItems] = useState([]);
     const [deleteById, { isSuccess: isDeleteByIdSuccess, isError: isDeleteByIdError, error: deleteByIdError, isLoading: isDeleteByIdLoading },] = useDeleteSessionByIdMutation();
     const [deleteUserSessions, { isSuccess: isDeleteUserSessionsSuccess, isError: isDeleteUserSessionsError, error: deleteUserSessionsError, isLoading: isDeleteUserSessionsLoading },] = useDeleteAllSessionsForUserMutation();
-    const { data: config } = useGetConfigurationQuery('global', {refetchOnMountOrArgChange: 5});
+    const [getConfiguration] = useLazyGetConfigurationQuery();
+    const [config, setConfig] = useState<IConfiguration>();
     const { data: sessions, isLoading } = useListSessionsQuery(null, {refetchOnMountOrArgChange: 5});
     const { items, collectionProps, paginationProps } = useCollection(sessions ?? [], {
         filtering: {
@@ -66,6 +70,16 @@ export function Sessions () {
         selection: {},
     });
 
+    useEffect(() => {
+        if (!auth.isLoading && auth.isAuthenticated) {
+            getConfiguration('global').then((resp) => {
+                if (resp.data && resp.data.length > 0) {
+                    setConfig(resp.data[0]);
+                }
+            });
+        }
+    }, [auth, getConfiguration]);
+
     useEffect(() => {
         if (!isDeleteByIdLoading && isDeleteByIdSuccess) {
             notificationService.generateNotification('Successfully deleted session', 'success');
@@ -134,7 +148,7 @@ export function Sessions () {
                                     >
                                         Refresh
                                     </Button>
-                                    {config && config[0].configuration.enabledComponents.deleteSessionHistory &&
+                                    {config?.configuration.enabledComponents.deleteSessionHistory &&
                                     <Button
                                         iconAlt='Delete session(s)'
                                         iconName='delete-marker'