ui: context management modal (#2326)

ui/desktop/src/components/ChatView.tsx

@@ -19,6 +19,7 @@ import { fetchSessionDetails } from '../sessions';
 // import { configureRecipeExtensions } from '../utils/recipeExtensions';
 import 'react-toastify/dist/ReactToastify.css';
 import { useMessageStream } from '../hooks/useMessageStream';
+import { SessionSummaryModal } from './context_management/SessionSummaryModal';
 import { Recipe } from '../recipe';
 import {
   Message,
@@ -29,6 +30,7 @@ import {
   ToolResponseMessageContent,
   ToolConfirmationRequestMessageContent,
 } from '../types/message';
+import { manageContext } from './context_management';
 
 export interface ChatType {
   id: string;
@@ -70,6 +72,16 @@ export default function ChatView({
   const [sessionTokenCount, setSessionTokenCount] = useState<number>(0);
   const scrollRef = useRef<ScrollAreaHandle>(null);
 
+  const [isSummaryModalOpen, setIsSummaryModalOpen] = useState(false);
+  const [summaryContent, setSummaryContent] = useState('');
+  const [summarizedThread, setSummarizedThread] = useState<Message[]>([]);
+
+  // Add this function to handle opening the summary modal with content
+  const handleViewSummary = (summary: string) => {
+    setSummaryContent(summary);
+    setIsSummaryModalOpen(true);
+  };
+
   // Get recipeConfig directly from appConfig
   const recipeConfig = window.appConfig.get('recipeConfig') as Recipe | null;
 
@@ -288,9 +300,55 @@ export default function ChatView({
     }
   };
 
+  // Add this function to ChatView.tsx to detect if a message contains ContextLengthExceededContent
+  const hasContextLengthExceededContent = (message: Message): boolean => {
+    return message.content.some((content) => content.type === 'contextLengthExceeded');
+  };
+
+  const handleContextLengthExceeded = async () => {
+    // If we already have a summary, use that
+    if (summaryContent) {
+      return summaryContent;
+    }
+
+    // Otherwise, generate a summary
+    const response = await manageContext({ messages: messages, manageAction: 'summarize' });
+    setSummarizedThread(response.messages);
+    return response.messages[0].text;
+  };
+
+  const SummarizedNotification = ({
+    onViewSummary,
+  }: {
+    onViewSummary: (summaryContent: string) => void;
+  }) => {
+    const handleViewSummary = async () => {
+      // Await the result to get a string
+      const summary = summaryContent || (await handleContextLengthExceeded());
+      onViewSummary(summary); // Now always passing a string
+    };
+
+    return (
+      <div className="flex flex-col items-start mt-1 pl-4">
+        <span className="text-xs text-gray-400 italic">Session summarized</span>
+        <button
+          onClick={handleViewSummary}
+          className="text-xs text-textStandard cursor-pointer hover:text-textSubtle transition-colors mt-1"
+        >
+          View or edit summary
+        </button>
+      </div>
+    );
+  };
+
   // Filter out standalone tool response messages for rendering
   // They will be shown as part of the tool invocation in the assistant message
   const filteredMessages = messages.filter((message) => {
+    // TODO: use this summarized thread in the chat window
+    if (summarizedThread.length > 0) {
+      // we have a summarized thread
+      console.log('summarized thread has been created --', summarizedThread);
+    }
     // Keep all assistant messages and user messages that aren't just tool responses
     if (message.role === 'assistant') return true;
 
@@ -379,17 +437,24 @@ export default function ChatView({
                   {isUserMessage(message) ? (
                     <UserMessage message={message} />
                   ) : (
-                    <GooseMessage
+                    <>
-                      messageHistoryIndex={chat?.messageHistoryIndex}
+                      {/* Only render GooseMessage if it's not a CLE message (and we are not in alpha mode) */}
-                      message={message}
+                      {process.env.ALPHA && hasContextLengthExceededContent(message) ? (
-                      messages={messages}
+                        // Render the summarized notification for CLE messages only in alpha mode
-                      // metadata={messageMetadata[message.id || '']}
+                        <SummarizedNotification onViewSummary={handleViewSummary} />
-                      append={(text) => append(createUserMessage(text))}
+                      ) : (
-                      appendMessage={(newMessage) => {
+                        <GooseMessage
-                        const updatedMessages = [...messages, newMessage];
+                          messageHistoryIndex={chat?.messageHistoryIndex}
-                        setMessages(updatedMessages);
+                          message={message}
-                      }}
+                          messages={messages}
-                    />
+                          append={(text) => append(createUserMessage(text))}
+                          appendMessage={(newMessage) => {
+                            const updatedMessages = [...messages, newMessage];
+                            setMessages(updatedMessages);
+                          }}
+                        />
+                      )}
+                    </>
                   )}
                 </div>
               ))}
@@ -434,6 +499,18 @@ export default function ChatView({
       </Card>
 
       {showGame && <FlappyGoose onClose={() => setShowGame(false)} />}
+      {process.env.ALPHA && (
+        <SessionSummaryModal
+          isOpen={isSummaryModalOpen}
+          onClose={() => setIsSummaryModalOpen(false)}
+          onSave={(editedContent) => {
+            console.log('Saving summary...');
+            setSummaryContent(editedContent);
+            setIsSummaryModalOpen(false);
+          }}
+          summaryContent={summaryContent}
+        />
+      )}
     </div>
   );
 }

ui/desktop/src/components/bottom_menu/BottomMenu.tsx

@@ -19,10 +19,10 @@ const TOKEN_WARNING_THRESHOLD = 0.8; // warning shows at 80% of the token limit
 const TOOLS_MAX_SUGGESTED = 60; // max number of tools before we show a warning
 
 export default function BottomMenu({
-  hasMessages,
+                                     hasMessages,
-  setView,
+                                     setView,
-  numTokens = 0,
+                                     numTokens = 0,
-}: {
+                                   }: {
   hasMessages: boolean;
   setView: (view: View, viewOptions?: ViewOptions) => void;
   numTokens?: number;
@@ -158,18 +158,18 @@ export default function BottomMenu({
   }, [isDirTruncated]);
 
   return (
-    <div className="flex justify-between items-center text-textSubtle relative bg-bgSubtle border-t border-borderSubtle text-xs pl-4 h-[40px] pb-1 align-middle">
+      <div className="flex justify-between items-center text-textSubtle relative bg-bgSubtle border-t border-borderSubtle text-xs pl-4 h-[40px] pb-1 align-middle">
-      {/* Directory Chooser - Always visible */}
+        {/* Directory Chooser - Always visible */}
-      <span
+        <span
-        className="cursor-pointer flex items-center [&>svg]:size-4"
+            className="cursor-pointer flex items-center [&>svg]:size-4"
-        onClick={async () => {
+            onClick={async () => {
-          if (hasMessages) {
+              if (hasMessages) {
-            window.electron.directoryChooser();
+                window.electron.directoryChooser();
-          } else {
+              } else {
-            window.electron.directoryChooser(true);
+                window.electron.directoryChooser(true);
-          }
+              }
-        }}
+            }}
-      >
+        >
         <Document className="mr-1" />
         <TooltipProvider>
           <Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
@@ -191,85 +191,85 @@ export default function BottomMenu({
         <ChevronUp className="ml-1" />
       </span>
 
-      {/* Goose Mode Selector Dropdown */}
+        {/* Goose Mode Selector Dropdown */}
-      <BottomMenuModeSelection setView={setView} />
+        <BottomMenuModeSelection setView={setView} />
 
-      {/* Right-side section with ToolCount and Model Selector together */}
+        {/* Right-side section with ToolCount and Model Selector together */}
-      <div className="flex items-center mr-4 space-x-1">
+        <div className="flex items-center mr-4 space-x-1">
-        {/* Tool and Token count */}
+          {/* Tool and Token count */}
-        {<BottomMenuAlertPopover alerts={alerts} />}
+          {<BottomMenuAlertPopover alerts={alerts} />}
-        {/* Model Selector Dropdown */}
+          {/* Model Selector Dropdown */}
-        {settingsV2Enabled ? (
+          {settingsV2Enabled ? (
-          <ModelsBottomBar dropdownRef={dropdownRef} setView={setView} />
+              <ModelsBottomBar dropdownRef={dropdownRef} setView={setView} />
-        ) : (
+          ) : (
-          <div className="relative flex items-center ml-0 mr-4" ref={dropdownRef}>
+              <div className="relative flex items-center ml-0 mr-4" ref={dropdownRef}>
-            <div
+                <div
-              className="flex items-center cursor-pointer"
+                    className="flex items-center cursor-pointer"
-              onClick={() => setIsModelMenuOpen(!isModelMenuOpen)}
+                    onClick={() => setIsModelMenuOpen(!isModelMenuOpen)}
-            >
+                >
-              <span>{(currentModel?.alias ?? currentModel?.name) || 'Select Model'}</span>
+                  <span>{(currentModel?.alias ?? currentModel?.name) || 'Select Model'}</span>
-              {isModelMenuOpen ? (
+                  {isModelMenuOpen ? (
-                <ChevronDown className="w-4 h-4 ml-1" />
+                      <ChevronDown className="w-4 h-4 ml-1" />
-              ) : (
+                  ) : (
-                <ChevronUp className="w-4 h-4 ml-1" />
+                      <ChevronUp className="w-4 h-4 ml-1" />
-              )}
+                  )}
-            </div>
+                </div>
 
-            {/* Dropdown Menu */}
+                {/* Dropdown Menu */}
-            {isModelMenuOpen && (
+                {isModelMenuOpen && (
-              <div className="absolute bottom-[24px] right-0 w-[300px] bg-bgApp rounded-lg border border-borderSubtle">
+                    <div className="absolute bottom-[24px] right-0 w-[300px] bg-bgApp rounded-lg border border-borderSubtle">
-                <div className="">
+                      <div className="">
-                  <ModelRadioList
+                        <ModelRadioList
-                    className="divide-y divide-borderSubtle"
+                            className="divide-y divide-borderSubtle"
-                    renderItem={({ model, isSelected, onSelect }) => (
+                            renderItem={({ model, isSelected, onSelect }) => (
-                      <label key={model.alias ?? model.name} className="block cursor-pointer">
+                                <label key={model.alias ?? model.name} className="block cursor-pointer">
-                        <div
+                                  <div
-                          className="flex items-center justify-between p-2 text-textStandard hover:bg-bgSubtle transition-colors"
+                                      className="flex items-center justify-between p-2 text-textStandard hover:bg-bgSubtle transition-colors"
-                          onClick={onSelect}
+                                      onClick={onSelect}
-                        >
+                                  >
-                          <div>
+                                    <div>
-                            <p className="text-sm ">{model.alias ?? model.name}</p>
+                                      <p className="text-sm ">{model.alias ?? model.name}</p>
-                            <p className="text-xs text-textSubtle">
+                                      <p className="text-xs text-textSubtle">
-                              {model.subtext ?? model.provider}
+                                        {model.subtext ?? model.provider}
-                            </p>
+                                      </p>
-                          </div>
+                                    </div>
-                          <div className="relative">
+                                    <div className="relative">
-                            <input
+                                      <input
-                              type="radio"
+                                          type="radio"
-                              name="recentModels"
+                                          name="recentModels"
-                              value={model.name}
+                                          value={model.name}
-                              checked={isSelected}
+                                          checked={isSelected}
-                              onChange={onSelect}
+                                          onChange={onSelect}
-                              className="peer sr-only"
+                                          className="peer sr-only"
-                            />
+                                      />
-                            <div
+                                      <div
-                              className="h-4 w-4 rounded-full border border-gray-400 dark:border-gray-500
+                                          className="h-4 w-4 rounded-full border border-gray-400 dark:border-gray-500
                           peer-checked:border-[6px] peer-checked:border-black dark:peer-checked:border-white
                           peer-checked:bg-white dark:peer-checked:bg-black
                           transition-all duration-200 ease-in-out"
-                            ></div>
+                                      ></div>
-                          </div>
+                                    </div>
-                        </div>
+                                  </div>
-                      </label>
+                                </label>
-                    )}
+                            )}
-                  />
+                        />
-                  <div
+                        <div
-                    className="flex items-center justify-between text-textStandard p-2 cursor-pointer hover:bg-bgStandard
+                            className="flex items-center justify-between text-textStandard p-2 cursor-pointer hover:bg-bgStandard
                   border-t border-borderSubtle mt-2"
-                    onClick={() => {
+                            onClick={() => {
-                      setIsModelMenuOpen(false);
+                              setIsModelMenuOpen(false);
-                      setView('settings');
+                              setView('settings');
-                    }}
+                            }}
-                  >
+                        >
-                    <span className="text-sm">Tools and Settings</span>
+                          <span className="text-sm">Tools and Settings</span>
-                    <Sliders className="w-5 h-5 ml-2 rotate-90" />
+                          <Sliders className="w-5 h-5 ml-2 rotate-90" />
-                  </div>
+                        </div>
-                </div>
+                      </div>
+                    </div>
+                )}
               </div>
-            )}
+          )}
-          </div>
+        </div>
-        )}
       </div>
-    </div>
   );
-}
+}

ui/desktop/src/components/context_management/SessionSummaryModal.tsx

@@ -0,0 +1,126 @@
+import React, { useRef, useEffect } from 'react';
+import { Card } from '../ui/card';
+import { Geese } from '../icons/Geese';
+
+interface SessionSummaryModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (editedContent: string) => void;
+  summaryContent: string;
+}
+
+// This is a specialized version of BaseModal that's wider just for the SessionSummaryModal
+function WiderBaseModal({
+  isOpen,
+  title,
+  children,
+  actions,
+}: {
+  isOpen: boolean;
+  title: string;
+  children: React.ReactNode;
+  actions: React.ReactNode; // Buttons for actions
+}) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/20 backdrop-blur-sm z-[9999] flex items-center justify-center overflow-y-auto">
+      <Card className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[640px] max-h-[85vh] bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden p-[16px] pt-[24px] pb-0 flex flex-col">
+        <div className="px-4 pb-0 space-y-8 flex-grow overflow-hidden">
+          {/* Header */}
+          <div className="flex">
+            <h2 className="text-2xl font-regular dark:text-white text-gray-900">{title}</h2>
+          </div>
+
+          {/* Content - Make it scrollable */}
+          {children && <div className="px-2 overflow-y-auto max-h-[60vh]">{children}</div>}
+
+          {/* Actions */}
+          <div className="mt-[8px] ml-[-24px] mr-[-24px] pt-[16px]">{actions}</div>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+export function SessionSummaryModal({
+  isOpen,
+  onClose,
+  onSave,
+  summaryContent,
+}: SessionSummaryModalProps) {
+  // Use a ref for the textarea for uncontrolled component
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Initialize the textarea value when the modal opens
+  useEffect(() => {
+    if (isOpen && textareaRef.current) {
+      textareaRef.current.value = summaryContent;
+    }
+  }, [isOpen, summaryContent]);
+
+  // Handle Save action with the edited content from the ref
+  const handleSave = () => {
+    const currentText = textareaRef.current ? textareaRef.current.value : '';
+    onSave(currentText);
+  };
+
+  // Header Component - Icon, Title, and Description
+  const Header = () => (
+    <div className="flex flex-col items-center text-center mb-6">
+      {/* Icon */}
+      <div className="mb-4">
+        <Geese width="48" height="50" />
+      </div>
+
+      {/* Title */}
+      <h2 className="text-xl font-medium text-gray-900 dark:text-white mb-2">Session Summary</h2>
+
+      {/* Description */}
+      <p className="text-sm text-gray-600 dark:text-gray-400 mb-0 max-w-md">
+        This summary was created to manage your context limit. Review and edit to keep your session
+        running smoothly with the information that matters most.
+      </p>
+    </div>
+  );
+
+  // Uncontrolled Summary Content Component
+  const SummaryContent = () => (
+    <div className="w-full mb-6">
+      <h3 className="text-base font-medium text-gray-900 dark:text-white mb-3">Summarization</h3>
+
+      <textarea
+        ref={textareaRef}
+        defaultValue={summaryContent}
+        className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 text-sm w-full min-h-[200px] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+      />
+    </div>
+  );
+
+  // Footer Buttons
+  const modalActions = (
+    <div>
+      <button
+        onClick={handleSave}
+        className="w-full h-[60px] text-gray-900 dark:text-white font-medium text-base hover:bg-gray-50 dark:hover:bg-gray-800 border-t border-gray-200 dark:border-gray-700"
+      >
+        Save and Continue
+      </button>
+      <button
+        onClick={onClose}
+        className="w-full h-[60px] text-gray-500 dark:text-gray-400 font-medium text-base hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 border-t border-gray-200 dark:border-gray-700"
+      >
+        Cancel
+      </button>
+    </div>
+  );
+
+  return (
+    <WiderBaseModal isOpen={isOpen} title="" actions={modalActions}>
+      <div className="flex flex-col w-full">
+        <Header />
+        <SummaryContent />
+      </div>
+    </WiderBaseModal>
+  );
+}

ui/desktop/src/components/context_management/index.ts

@@ -0,0 +1,37 @@
+import { Message } from '../../types/message';
+import { getApiUrl, getSecretKey } from '../../config';
+
+export async function manageContext({
+  messages,
+  manageAction,
+}: {
+  messages: Message[];
+  manageAction: 'trunction' | 'summarize';
+}) {
+  const response = await fetch(getApiUrl('/context/manage'), {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Secret-Key': getSecretKey(),
+    },
+    body: JSON.stringify({
+      messages,
+      manageAction,
+    }),
+  });
+  if (!response.ok) {
+    if (!response.ok) {
+      // Get the status text or a default message
+      const errorText = await response.text().catch(() => 'Unknown error');
+      // log error with status and details
+      console.error(
+        `Context management failed: ${response.status} ${response.statusText} - ${errorText}`
+      );
+      throw new Error(
+        `Context management failed: ${response.status} ${response.statusText} - ${errorText}\n\nStart a new session.`
+      );
+    }
+  }
+  const data = await response.json();
+  return data;
+}

ui/desktop/src/hooks/useMessageStream.ts

@@ -338,6 +338,7 @@ export function useMessageStream({
         mutateLoading(false);
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [api, processMessageStream, mutateLoading, setError, onResponse, onError, maxSteps]
   );