feat: add summarization profile support and API endpoint for conversation summaries

server/index.js

@@ -13,6 +13,61 @@ const __dirname = path.dirname(__filename)
 app.use(cors());
 app.use(express.json());
 
+app.post('/api/summarize', async (req, res) => {
+  const { content, apiEndpoint, apiKey, model } = req.body;
+  
+  console.log('Received summarize request with:', {
+    apiEndpoint,
+    model,
+    contentLength: content.length
+  });
+
+  try {
+    let apiUrl;
+    if (apiEndpoint.endsWith('#')) {
+        apiUrl = apiEndpoint.slice(0, -1);
+    } else if (apiEndpoint.endsWith('/')) {
+        apiUrl = `${apiEndpoint}chat/completions`;
+    } else {
+        apiUrl = `${apiEndpoint}/v1/chat/completions`;
+    }
+    console.log('Calling API endpoint:', apiUrl);
+    
+    const response = await fetch(apiUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${apiKey}`
+      },
+      body: JSON.stringify({
+        model: model,
+        messages: [{
+          role: 'user',
+          content: `Summarize this conversation in 3-5 words: ${content}`
+        }],
+        temperature: 0.2,
+        max_tokens: 20
+      })
+    });
+
+    if (!response.ok) {
+      const errorData = await response.text();
+      console.error('API error:', {
+        status: response.status,
+        error: errorData
+      });
+      throw new Error(`API error: ${response.status} - ${errorData}`);
+    }
+
+    const data = await response.json();
+    const summary = data.choices[0].message.content.trim();
+    res.json({ summary });
+  } catch (error) {
+    console.error('Error:', error);
+    res.status(500).json({ error: error.message });
+  }
+});
+
 app.post('/api/chat', async (req, res) => {
   const { messages, apiEndpoint, apiKey, model } = req.body;
   

src/App.jsx

@@ -15,6 +15,14 @@ function App() {
     }
   ]);
   
+  const [summarizationProfile, setSummarizationProfile] = useLocalStorage('summarizationProfile', {
+    id: 'default-summarization-profile',
+    name: 'Summarization Profile',
+    apiEndpoint: '',
+    apiKey: '',
+    model: 'DeepSeek-R1'
+  });
+  
   const [activeProfileId, setActiveProfileId] = useLocalStorage('activeProfileId', 'default');
   
   const [chats, setChats] = useLocalStorage('chats', []);
@@ -124,6 +132,7 @@ function App() {
             <ChatWindow 
               chat={chats.find(c => c.id === currentChatId)}
               profile={activeProfile}
+              summarizationProfile={summarizationProfile}
               onUpdateChat={(updatedChat) => {
                 setChats(chats.map(c => 
                   c.id === updatedChat.id ? updatedChat : c
@@ -151,7 +160,7 @@ function App() {
             >
               ×
             </button>
-            <Settings 
+              <Settings 
               profiles={profiles} 
               activeProfileId={activeProfileId}
               onSaveProfiles={(newProfiles) => {
@@ -161,6 +170,8 @@ function App() {
                   setActiveProfileId(newProfiles[0]?.id || null);
                 }
               }}
+              onSaveSummarizationProfile={setSummarizationProfile}
+              summarizationProfile={summarizationProfile}
               onChangeActiveProfile={setActiveProfileId}
               onCloseSettings={() => setShowSettings(false)}
             />
@@ -182,4 +193,4 @@ function App() {
   );
 }
 
-export default App; 
+export default App;

src/components/ChatWindow.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
 
-function ChatWindow({ chat, profile, onUpdateChat }) {
+function ChatWindow({ chat, profile, summarizationProfile, onUpdateChat }) {
   const [input, setInput] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [collapsedThinks, setCollapsedThinks] = useState(new Set());
@@ -125,6 +125,43 @@ function ChatWindow({ chat, profile, onUpdateChat }) {
         messages: [...updatedChat.messages, aiMessage]
       };
       onUpdateChat(finalChat);
+
+      // Generate summary title after first message exchange
+      if (finalChat.messages.length === 2) {
+        try {
+          const summaryResponse = await fetch('/api/summarize', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              content: finalChat.messages.map(msg => msg.content).join('\n'),
+              apiKey: summarizationProfile?.apiKey || profile.apiKey || '',
+              model: summarizationProfile?.model || profile.model || 'gpt-3.5-turbo',
+              apiEndpoint: summarizationProfile?.apiEndpoint || profile.apiEndpoint || 'https://api.openai.com/v1'
+            })
+          });
+
+          if (!summaryResponse.ok) {
+            throw new Error(`Summary API error: ${summaryResponse.status}`);
+          }
+
+          const { summary } = await summaryResponse.json();
+          const updatedChatWithTitle = {
+            ...finalChat,
+            title: summary
+          };
+          onUpdateChat(updatedChatWithTitle);
+        } catch (error) {
+          console.error('Failed to generate summary:', error);
+          // Fallback to default title if summarization fails
+          const updatedChatWithTitle = {
+            ...finalChat,
+            title: 'New Conversation'
+          };
+          onUpdateChat(updatedChatWithTitle);
+        }
+      }
     } catch (error) {
       if (error.name !== 'AbortError') {
         console.error('Failed to send message:', error);

src/components/Settings.jsx

@@ -1,11 +1,27 @@
 import { useState } from 'react';
 
-function Settings({ profiles, activeProfileId, onSaveProfiles, onChangeActiveProfile, onCloseSettings }) {
+function Settings({ 
+  profiles, 
+  activeProfileId, 
+  onSaveProfiles, 
+  onChangeActiveProfile, 
+  onCloseSettings,
+  onSaveSummarizationProfile,
+  summarizationProfile 
+}) {
   const [localProfiles, setLocalProfiles] = useState(profiles);
+  const [localSummarizationProfile, setLocalSummarizationProfile] = useState(summarizationProfile || {
+    id: 'default-summarization-profile',
+    name: 'Summarization Profile',
+    apiEndpoint: '',
+    apiKey: '',
+    model: 'DeepSeek-R1'
+  });
   const [editingProfileId, setEditingProfileId] = useState(activeProfileId);
   const [isHintExpanded, setIsHintExpanded] = useState(false);
 
   const editingProfile = localProfiles.find(p => p.id === editingProfileId) || localProfiles[0];
+  const editingSummarizationProfile = localSummarizationProfile;
 
   const handleProfileChange = (updatedProfile) => {
     setLocalProfiles(localProfiles.map(p => 
@@ -13,6 +29,10 @@ function Settings({ profiles, activeProfileId, onSaveProfiles, onChangeActivePro
     ));
   };
 
+  const handleSummarizationProfileChange = (updatedProfile) => {
+    setLocalSummarizationProfile(updatedProfile);
+  };
+
   const handleAddProfile = () => {
     const newId = `profile-${Date.now()}`;
     const newProfile = {
@@ -29,7 +49,6 @@ function Settings({ profiles, activeProfileId, onSaveProfiles, onChangeActivePro
   };
 
   const handleDeleteProfile = (profileId) => {
-    // Prevent deleting the last profile
     if (localProfiles.length <= 1) {
       alert("Cannot delete the last profile");
       return;
@@ -38,7 +57,6 @@ function Settings({ profiles, activeProfileId, onSaveProfiles, onChangeActivePro
     const updatedProfiles = localProfiles.filter(p => p.id !== profileId);
     setLocalProfiles(updatedProfiles);
     
-    // If we're deleting the currently edited profile, switch to another one
     if (editingProfileId === profileId) {
       setEditingProfileId(updatedProfiles[0].id);
     }
@@ -47,6 +65,7 @@ function Settings({ profiles, activeProfileId, onSaveProfiles, onChangeActivePro
   const handleSubmit = (e) => {
     e.preventDefault();
     onSaveProfiles(localProfiles);
+    onSaveSummarizationProfile(localSummarizationProfile);
     onChangeActiveProfile(editingProfileId);
     onCloseSettings();
   };
@@ -57,7 +76,7 @@ function Settings({ profiles, activeProfileId, onSaveProfiles, onChangeActivePro
       
       <div className="profiles-section">
         <div className="profiles-header">
-          <h3>Profiles</h3>
+          <h3>Chat Profiles</h3>
           <button 
             type="button" 
             className="add-profile-button"
@@ -90,18 +109,17 @@ function Settings({ profiles, activeProfileId, onSaveProfiles, onChangeActivePro
           ))}
         </div>
       </div>
-      
-      <form onSubmit={handleSubmit}>
+
+      <div className="profiles-section">
+        <h3>Summarization Profile</h3>
         <div className="current-profile-section">
-          <h3>Edit Profile: {editingProfile.name}</h3>
-          
           <div className="setting-item">
             <label>Profile Name:</label>
             <input
               type="text"
-              value={editingProfile.name}
-              onChange={(e) => handleProfileChange({
-                ...editingProfile,
+              value={localSummarizationProfile.name}
+              onChange={(e) => handleSummarizationProfileChange({
+                ...localSummarizationProfile,
                 name: e.target.value
               })}
               placeholder="Enter profile name"
@@ -112,39 +130,22 @@ function Settings({ profiles, activeProfileId, onSaveProfiles, onChangeActivePro
             <label>API Endpoint:</label>
             <input
               type="text"
-              value={editingProfile.apiEndpoint}
-              onChange={(e) => handleProfileChange({
-                ...editingProfile,
+              value={localSummarizationProfile.apiEndpoint}
+              onChange={(e) => handleSummarizationProfileChange({
+                ...localSummarizationProfile,
                 apiEndpoint: e.target.value
               })}
               placeholder="Enter API endpoint"
             />
-            <div className="setting-hint">
-              <button 
-                type="button" 
-                className="hint-toggle"
-                onClick={() => setIsHintExpanded(!isHintExpanded)}
-              >
-                {isHintExpanded ? 'Hide' : 'Show'} API Endpoint Format Examples
-              </button>
-              <div className={`hint-content ${isHintExpanded ? 'expanded' : ''}`}>
-                <p>API Endpoint format examples:</p>
-                <ul>
-                  <li>Ends with / → /chat/completions will be appended</li>
-                  <li>Ends with # → # will be removed</li>
-                  <li>Other cases → /v1/chat/completions will be appended</li>
-                </ul>
-              </div>
-            </div>
           </div>
           
           <div className="setting-item">
             <label>API Key:</label>
             <input
               type="password"
-              value={editingProfile.apiKey}
-              onChange={(e) => handleProfileChange({
-                ...editingProfile,
+              value={localSummarizationProfile.apiKey}
+              onChange={(e) => handleSummarizationProfileChange({
+                ...localSummarizationProfile,
                 apiKey: e.target.value
               })}
               placeholder="Enter your API key"
@@ -155,15 +156,93 @@ function Settings({ profiles, activeProfileId, onSaveProfiles, onChangeActivePro
             <label>Model:</label>
             <input
               type="text"
-              value={editingProfile.model}
-              onChange={(e) => handleProfileChange({
-                ...editingProfile,
+              value={localSummarizationProfile.model}
+              onChange={(e) => handleSummarizationProfileChange({
+                ...localSummarizationProfile,
                 model: e.target.value
               })}
               placeholder="Enter model name (e.g., DeepSeek-R1)"
             />
           </div>
         </div>
+      </div>
+      
+      <form onSubmit={handleSubmit}>
+        {editingProfile && (
+          <div className="current-profile-section">
+            <h3>Edit Chat Profile: {editingProfile.name}</h3>
+            
+            <div className="setting-item">
+              <label>Profile Name:</label>
+              <input
+                type="text"
+                value={editingProfile.name}
+                onChange={(e) => handleProfileChange({
+                  ...editingProfile,
+                  name: e.target.value
+                })}
+                placeholder="Enter profile name"
+              />
+            </div>
+            
+            <div className="setting-item">
+              <label>API Endpoint:</label>
+              <input
+                type="text"
+                value={editingProfile.apiEndpoint}
+                onChange={(e) => handleProfileChange({
+                  ...editingProfile,
+                  apiEndpoint: e.target.value
+                })}
+                placeholder="Enter API endpoint"
+              />
+              <div className="setting-hint">
+                <button 
+                  type="button" 
+                  className="hint-toggle"
+                  onClick={() => setIsHintExpanded(!isHintExpanded)}
+                >
+                  {isHintExpanded ? 'Hide' : 'Show'} API Endpoint Format Examples
+                </button>
+                <div className={`hint-content ${isHintExpanded ? 'expanded' : ''}`}>
+                  <p>API Endpoint format examples:</p>
+                  <ul>
+                    <li>Ends with / → /chat/completions will be appended</li>
+                    <li>Ends with # → # will be removed</li>
+                    <li>Other cases → /v1/chat/completions will be appended</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            
+            <div className="setting-item">
+              <label>API Key:</label>
+              <input
+                type="password"
+                value={editingProfile.apiKey}
+                onChange={(e) => handleProfileChange({
+                  ...editingProfile,
+                  apiKey: e.target.value
+                })}
+                placeholder="Enter your API key"
+              />
+            </div>
+            
+            <div className="setting-item">
+              <label>Model:</label>
+              <input
+                type="text"
+                value={editingProfile.model}
+                onChange={(e) => handleProfileChange({
+                  ...editingProfile,
+                  model: e.target.value
+                })}
+                placeholder="Enter model name (e.g., DeepSeek-R1)"
+              />
+            </div>
+          </div>
+        )}
+
         
         <div className="settings-actions">
           <button type="submit" className="save-button">Save Settings</button>