add saving, export and import of multiple chat histories

Author: josephgodwinkimani

package-lock.json

@@ -3,6 +3,19 @@
   "private": true,
   "version": "1.0.0",
   "type": "module",
+  "homepage": "https://github.com/josephgodwinkimani/ollama-coder",
+  "bugs": {
+    "url": "https://github.com/josephgodwinkimani/ollama-coder/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/josephgodwinkimani/ollama-coder.git"
+  },
+  "authors": [
+    {
+      "name": "Godwin Kimani"
+    }
+  ],
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
@@ -38,9 +51,12 @@
     "marked": "^15.0.7",
     "prismjs": "^1.29.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-select": "5.10.0",
+    "uuid": "11.1.0"
   },
   "devDependencies": {
+    "@types/uuid": "10.0.0",
     "@eslint/js": "^9.20.0",
     "@types/node": "^22.13.2",
     "@types/prismjs": "^1.26.5",
@@ -69,4 +85,4 @@
     "typescript-eslint": "^8.22.0",
     "vite": "^6.1.0"
   }
-}
+}

package.json

@@ -10,8 +10,13 @@ import { ModelSettingsInterface } from './components/ModelSettings';
 import { WaitingIndicator } from './components/WaitingIndicator';
 import { ToastProvider } from './context/ToastContext';
 import { storageService } from './services/StorageService';
-import { Message, Model } from './types/types';
+import { ChatEntry, ChatHistory, Message, Model } from './types/types';
 import { modelStorage } from './utils/modelStorage';
+import { v4 as uuidv4 } from 'uuid';
+import Select from 'react-select';
+import { ExportButton } from './components/ExportButton';
+import { exportChatHistories } from './utils/exportUtils';
+import { ImportButton } from './components/ImportButton';
 
 function App() {
   const [models, setModels] = useState<Model[]>([]);
@@ -28,6 +33,8 @@ function App() {
   const [dateTime, setDateTime] = useState('');
   const [waitStartTime, setWaitStartTime] = useState<number | null>(null);
   const [waitEndTime, setWaitEndTime] = useState<number | null>(null);
+  const [chatHistories, setChatHistories] = useState<ChatHistory[]>([]);
+  const [currentChatId, setCurrentChatId] = useState<string>(uuidv4());
 
   useEffect(() => {
     const initialize = async () => {
@@ -49,7 +56,7 @@ function App() {
     };
 
     // Update time every second
-    const updateDateTime = () => {
+    const updateDateTime: () => void = () => {
       console.log(dateTime);
       const now = new Date();
       const formattedDate = formatDateTime(now);
@@ -67,7 +74,7 @@ function App() {
     };
   }, []);
 
-  const loadModels = async () => {
+  const loadModels: () => Promise<void> = async () => {
     try {
       const response = await ollamaApi.listModels();
       setModels(response?.models as Model[]);
@@ -82,13 +89,15 @@ function App() {
     }
   };
 
-  const handleSettingsChange = (settings: ModelSettingsInterface) => {
+  const handleSettingsChange: (settings: ModelSettingsInterface) => void = (
+    settings: ModelSettingsInterface
+  ) => {
     setModelSettings(settings);
     // Save settings to localStorage
     localStorage.setItem('modelSettings', JSON.stringify(settings));
   };
 
-  const formatDateTime = (date: Date): string => {
+  const formatDateTime: (date: Date) => string = (date: Date): string => {
     const pad = (num: number): string => num.toString().padStart(2, '0');
 
     const year = date.getUTCFullYear();
@@ -101,29 +110,49 @@ function App() {
     return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
   };
 
-  const loadModelSettings = () => {
+  const loadModelSettings: () => void = () => {
     const savedSettings = localStorage.getItem('modelSettings');
     if (savedSettings) {
       setModelSettings(JSON.parse(savedSettings));
     }
   };
 
-  const loadChatHistory = async () => {
+  const loadChatHistory: () => Promise<void> = async () => {
     try {
-      const chat = await storageService.loadLatestChat();
-      if (chat && chat?.messages && chat?.messages?.length > 0) {
-        console.log('Loading chat history:', chat);
-        setMessages(chat?.messages);
-        if (chat?.model) {
-          setSelectedModel(chat?.model);
-        }
+      const histories = await storageService.loadAllChats();
+      if (!Array.isArray(histories)) {
+        console.error('Invalid chat histories format');
+        return;
+      }
+
+      const historiesWithTitles = histories
+        .filter(chat => chat && typeof chat === 'object')
+        .map(chat => ({
+          ...chat,
+          id: String(chat.id || uuidv4()), // Convert ID to string
+          title: getFirstQuestionPreview(Array.isArray(chat.messages) ? chat.messages : []),
+        }));
+
+      console.log(historiesWithTitles);
+      setChatHistories(historiesWithTitles);
+
+      // Load latest chat if exists
+      const latestChat = historiesWithTitles[historiesWithTitles.length - 1];
+      if (latestChat && Array.isArray(latestChat.messages)) {
+        setMessages(latestChat.messages);
+        setSelectedModel(latestChat.model || '');
+        setCurrentChatId(latestChat.id);
       }
     } catch (error) {
-      console.error('Error loading chat history:', error);
+      console.error('Error loading chat histories:', error);
+      setChatHistories([]); // Reset to empty array on error
     }
   };
 
-  const handleFileContent = (content: string, filename: string) => {
+  const handleFileContent: (content: string, filename: string) => void = (
+    content: string,
+    filename: string
+  ) => {
     // Create a message with the file content
     const fileMessage = `Using this file named "${filename}" with the content:\n\`\`\`${filename}\n${content}\n\`\`\`\n`;
 
@@ -132,7 +161,10 @@ function App() {
     setFileContent(fileMessage);
   };
 
-  const calculateWaitTime = (startTime: number, endTime: number): string => {
+  const calculateWaitTime: (startTime: number, endTime: number) => string = (
+    startTime: number,
+    endTime: number
+  ): string => {
     const elapsedSeconds = Math.floor((endTime - startTime) / 1000);
     const minutes = Math.floor(elapsedSeconds / 60);
     const seconds = elapsedSeconds % 60;
@@ -178,29 +210,75 @@ function App() {
       const newMessages = [...updatedMessages, assistantMessage];
       setMessages(newMessages);
 
+      const chatHistory: ChatHistory = {
+        id: currentChatId,
+        title: getFirstQuestionPreview(newMessages),
+        messages: newMessages,
+        model: selectedModel,
+        timestamp: new Date().toISOString(),
+      };
+
+      const chatEntry: ChatEntry = {
+        ...chatHistory,
+        id: parseInt(currentChatId) || Date.now(),
+      };
+
+      await storageService.saveChat(chatHistory.messages, chatHistory.model, chatEntry);
+      setChatHistories(prev => [...prev.filter(ch => ch.id !== currentChatId), chatHistory]);
+
       // Save to storage
-      await storageService.saveChat(newMessages, selectedModel);
+      await storageService.saveChat(newMessages, selectedModel, {
+        ...chatHistory,
+        id: parseInt(currentChatId) || Date.now(),
+      });
       console.log(waitEndTime);
 
       // Play sound
-      const audio = new Audio('/sounds/notification-sound-3-262896.mp3');
+      const audio: HTMLAudioElement = new Audio('/sounds/notification-sound-3-262896.mp3');
       audio.play();
     } catch (error) {
       console.error('Error sending message:', error);
+      // Play sound
+      const audio: HTMLAudioElement = new Audio('/sounds/windows-error-sound-effect-35894.mp3');
+      audio.play();
     } finally {
       console.log(waitEndTime);
       setIsLoading(false);
       setWaitStartTime(null);
       setWaitEndTime(null);
+    }
+  };
 
-      // Play sound
-      const audio = new Audio('/sounds/windows-error-sound-effect-35894.mp3');
-      audio.play();
+  const getFirstQuestionPreview: (messages: Message[]) => string = (
+    messages: Message[]
+  ): string => {
+    const firstQuestion = messages.find(m => m.role === 'user')?.content || '';
+    const words = firstQuestion.split(' ').slice(0, 10).join(' ');
+    return words + (firstQuestion.split(' ').length > 10 ? '...' : '');
+  };
+
+  const handleChatSelect: (
+    selectedOption: {
+      value: string;
+      label: string;
+    } | null
+  ) => void = (selectedOption: { value: string; label: string } | null) => {
+    if (!selectedOption) return;
+
+    const selectedChat = chatHistories.find(ch => ch.id === selectedOption.value);
+    if (selectedChat) {
+      setMessages(selectedChat.messages);
+      setSelectedModel(selectedChat.model);
+      setCurrentChatId(selectedChat.id);
     }
   };
 
-  // Add this function in your App component
-  const handleClearAll = () => {
+  const handleNewChat: () => void = () => {
+    setMessages([]);
+    setCurrentChatId(uuidv4());
+  };
+
+  const handleClearAll: () => void = () => {
     // Clear messages
     setMessages([]);
 
@@ -222,6 +300,71 @@ function App() {
 
     // Clear file content if any
     setFileContent('');
+    setChatHistories([]);
+    setCurrentChatId(uuidv4());
+  };
+
+  const handleExport: () => void = () => {
+    if (chatHistories.length > 0) {
+      exportChatHistories(chatHistories);
+    }
+  };
+
+  const handleImport: (file: File) => Promise<void> = async (file: File) => {
+    try {
+      const fileContent: string = await file.text();
+      const importedHistories: ChatHistory[] = JSON.parse(fileContent) as ChatHistory[];
+
+      if (!Array.isArray(importedHistories)) {
+        throw new Error('Invalid chat history format');
+      }
+
+      // Validate and process imported histories
+      const validHistories: {
+        id: string;
+        timestamp: string;
+        title: string;
+        messages: Message[];
+        model: string;
+      }[] = importedHistories
+        .filter(
+          chat =>
+            chat &&
+            typeof chat === 'object' &&
+            Array.isArray(chat.messages) &&
+            typeof chat.model === 'string'
+        )
+        .map(chat => ({
+          ...chat,
+          id: uuidv4(), // Generate new IDs to avoid conflicts
+          timestamp: chat.timestamp || new Date().toISOString(),
+        }));
+
+      if (validHistories.length === 0) {
+        throw new Error('No valid chat histories found in file');
+      }
+
+      // Merge with existing histories
+      setChatHistories(prev => [...prev, ...validHistories]);
+
+      // Save merged histories to storage
+      const allHistories: ChatHistory[] = [...chatHistories, ...validHistories];
+      localStorage.setItem('ollama-chats', JSON.stringify(allHistories));
+
+      // Update current chat to the first imported chat
+      const firstImported: {
+        id: string;
+        timestamp: string;
+        title: string;
+        messages: Message[];
+        model: string;
+      } = validHistories[0];
+      setMessages(firstImported.messages);
+      setSelectedModel(firstImported.model);
+      setCurrentChatId(firstImported.id);
+    } catch (error) {
+      console.error('Error importing chat histories:', error);
+    }
   };
 
   return (
@@ -234,7 +377,38 @@ function App() {
             </a>
           </div>
           <div className="header-info">
-            <div className="info-line">
+            <div
+              className="info-line"
+              style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}
+            >
+              <Select
+                value={
+                  chatHistories.length > 0
+                    ? {
+                        value: currentChatId,
+                        label:
+                          chatHistories.find(ch => ch.id === currentChatId)?.title || 'New Chat',
+                      }
+                    : null
+                }
+                onChange={handleChatSelect}
+                options={chatHistories.map(chat => ({
+                  value: chat.id,
+                  label: chat.title,
+                }))}
+                placeholder="Select chat history..."
+                styles={{
+                  container: base => ({
+                    ...base,
+                    minWidth: '300px',
+                  }),
+                }}
+              />
+              <button onClick={handleNewChat} className="new-chat-button">
+                New Chat
+              </button>
+              <ExportButton onExport={handleExport} disabled={chatHistories.length === 0} />
+              <ImportButton onImport={handleImport} />
               <ClearDataButton onClear={handleClearAll} />
             </div>
           </div>

src/App.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+interface ExportButtonProps {
+  onExport: () => void;
+  disabled?: boolean;
+}
+
+export const ExportButton: React.FC<ExportButtonProps> = ({ onExport, disabled }) => {
+  return (
+    <button
+      onClick={onExport}
+      className="export-button"
+      disabled={disabled}
+      title="Export chat histories"
+    >
+      Export Chats
+    </button>
+  );
+};