first commit

app/lib/persistence/ChatDescription.client.tsx

@@ -0,0 +1,68 @@
+import { useStore } from '@nanostores/react';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+import WithTooltip from '~/components/ui/Tooltip';
+import { useEditChatDescription } from '~/lib/hooks';
+import { description as descriptionStore } from '~/lib/persistence';
+
+export function ChatDescription() {
+  const initialDescription = useStore(descriptionStore)!;
+
+  const { editing, handleChange, handleBlur, handleSubmit, handleKeyDown, currentDescription, toggleEditMode } =
+    useEditChatDescription({
+      initialDescription,
+      syncWithGlobalStore: true,
+    });
+
+  if (!initialDescription) {
+    // doing this to prevent showing edit button until chat description is set
+    return null;
+  }
+
+  return (
+    <div className="flex items-center justify-center">
+      {editing ? (
+        <form onSubmit={handleSubmit} className="flex items-center justify-center">
+          <input
+            type="text"
+            className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 mr-2 w-fit"
+            autoFocus
+            value={currentDescription}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+            style={{ width: `${Math.max(currentDescription.length * 8, 100)}px` }}
+          />
+          <TooltipProvider>
+            <WithTooltip tooltip="Save title">
+              <div className="flex justify-between items-center p-2 rounded-md bg-bolt-elements-item-backgroundAccent">
+                <button
+                  type="submit"
+                  className="i-ph:check-bold scale-110 hover:text-bolt-elements-item-contentAccent"
+                  onMouseDown={handleSubmit}
+                />
+              </div>
+            </WithTooltip>
+          </TooltipProvider>
+        </form>
+      ) : (
+        <>
+          {currentDescription}
+          <TooltipProvider>
+            <WithTooltip tooltip="Rename chat">
+              <div className="flex justify-between items-center p-2 rounded-md bg-bolt-elements-item-backgroundAccent ml-2">
+                <button
+                  type="button"
+                  className="i-ph:pencil-fill scale-110 hover:text-bolt-elements-item-contentAccent"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    toggleEditMode();
+                  }}
+                />
+              </div>
+            </WithTooltip>
+          </TooltipProvider>
+        </>
+      )}
+    </div>
+  );
+}

app/lib/persistence/db.ts

@@ -0,0 +1,234 @@
+import type { Message } from 'ai';
+import { createScopedLogger } from '~/utils/logger';
+import type { ChatHistoryItem } from './useChatHistory';
+
+const logger = createScopedLogger('ChatHistory');
+
+// this is used at the top level and never rejects
+export async function openDatabase(): Promise<IDBDatabase | undefined> {
+  if (typeof indexedDB === 'undefined') {
+    console.error('indexedDB is not available in this environment.');
+    return undefined;
+  }
+
+  return new Promise((resolve) => {
+    const request = indexedDB.open('boltHistory', 1);
+
+    request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
+      const db = (event.target as IDBOpenDBRequest).result;
+
+      if (!db.objectStoreNames.contains('chats')) {
+        const store = db.createObjectStore('chats', { keyPath: 'id' });
+        store.createIndex('id', 'id', { unique: true });
+        store.createIndex('urlId', 'urlId', { unique: true });
+      }
+    };
+
+    request.onsuccess = (event: Event) => {
+      resolve((event.target as IDBOpenDBRequest).result);
+    };
+
+    request.onerror = (event: Event) => {
+      resolve(undefined);
+      logger.error((event.target as IDBOpenDBRequest).error);
+    };
+  });
+}
+
+export async function getAll(db: IDBDatabase): Promise<ChatHistoryItem[]> {
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction('chats', 'readonly');
+    const store = transaction.objectStore('chats');
+    const request = store.getAll();
+
+    request.onsuccess = () => resolve(request.result as ChatHistoryItem[]);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+export async function setMessages(
+  db: IDBDatabase,
+  id: string,
+  messages: Message[],
+  urlId?: string,
+  description?: string,
+  timestamp?: string,
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction('chats', 'readwrite');
+    const store = transaction.objectStore('chats');
+
+    if (timestamp && isNaN(Date.parse(timestamp))) {
+      reject(new Error('Invalid timestamp'));
+      return;
+    }
+
+    const request = store.put({
+      id,
+      messages,
+      urlId,
+      description,
+      timestamp: timestamp ?? new Date().toISOString(),
+    });
+
+    request.onsuccess = () => resolve();
+    request.onerror = () => reject(request.error);
+  });
+}
+
+export async function getMessages(db: IDBDatabase, id: string): Promise<ChatHistoryItem> {
+  return (await getMessagesById(db, id)) || (await getMessagesByUrlId(db, id));
+}
+
+export async function getMessagesByUrlId(db: IDBDatabase, id: string): Promise<ChatHistoryItem> {
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction('chats', 'readonly');
+    const store = transaction.objectStore('chats');
+    const index = store.index('urlId');
+    const request = index.get(id);
+
+    request.onsuccess = () => resolve(request.result as ChatHistoryItem);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+export async function getMessagesById(db: IDBDatabase, id: string): Promise<ChatHistoryItem> {
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction('chats', 'readonly');
+    const store = transaction.objectStore('chats');
+    const request = store.get(id);
+
+    request.onsuccess = () => resolve(request.result as ChatHistoryItem);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+export async function deleteById(db: IDBDatabase, id: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction('chats', 'readwrite');
+    const store = transaction.objectStore('chats');
+    const request = store.delete(id);
+
+    request.onsuccess = () => resolve(undefined);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+export async function getNextId(db: IDBDatabase): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction('chats', 'readonly');
+    const store = transaction.objectStore('chats');
+    const request = store.getAllKeys();
+
+    request.onsuccess = () => {
+      const highestId = request.result.reduce((cur, acc) => Math.max(+cur, +acc), 0);
+      resolve(String(+highestId + 1));
+    };
+
+    request.onerror = () => reject(request.error);
+  });
+}
+
+export async function getUrlId(db: IDBDatabase, id: string): Promise<string> {
+  const idList = await getUrlIds(db);
+
+  if (!idList.includes(id)) {
+    return id;
+  } else {
+    let i = 2;
+
+    while (idList.includes(`${id}-${i}`)) {
+      i++;
+    }
+
+    return `${id}-${i}`;
+  }
+}
+
+async function getUrlIds(db: IDBDatabase): Promise<string[]> {
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction('chats', 'readonly');
+    const store = transaction.objectStore('chats');
+    const idList: string[] = [];
+
+    const request = store.openCursor();
+
+    request.onsuccess = (event: Event) => {
+      const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result;
+
+      if (cursor) {
+        idList.push(cursor.value.urlId);
+        cursor.continue();
+      } else {
+        resolve(idList);
+      }
+    };
+
+    request.onerror = () => {
+      reject(request.error);
+    };
+  });
+}
+
+export async function forkChat(db: IDBDatabase, chatId: string, messageId: string): Promise<string> {
+  const chat = await getMessages(db, chatId);
+
+  if (!chat) {
+    throw new Error('Chat not found');
+  }
+
+  // Find the index of the message to fork at
+  const messageIndex = chat.messages.findIndex((msg) => msg.id === messageId);
+
+  if (messageIndex === -1) {
+    throw new Error('Message not found');
+  }
+
+  // Get messages up to and including the selected message
+  const messages = chat.messages.slice(0, messageIndex + 1);
+
+  return createChatFromMessages(db, chat.description ? `${chat.description} (fork)` : 'Forked chat', messages);
+}
+
+export async function duplicateChat(db: IDBDatabase, id: string): Promise<string> {
+  const chat = await getMessages(db, id);
+
+  if (!chat) {
+    throw new Error('Chat not found');
+  }
+
+  return createChatFromMessages(db, `${chat.description || 'Chat'} (copy)`, chat.messages);
+}
+
+export async function createChatFromMessages(
+  db: IDBDatabase,
+  description: string,
+  messages: Message[],
+): Promise<string> {
+  const newId = await getNextId(db);
+  const newUrlId = await getUrlId(db, newId); // Get a new urlId for the duplicated chat
+
+  await setMessages(
+    db,
+    newId,
+    messages,
+    newUrlId, // Use the new urlId
+    description,
+  );
+
+  return newUrlId; // Return the urlId instead of id for navigation
+}
+
+export async function updateChatDescription(db: IDBDatabase, id: string, description: string): Promise<void> {
+  const chat = await getMessages(db, id);
+
+  if (!chat) {
+    throw new Error('Chat not found');
+  }
+
+  if (!description.trim()) {
+    throw new Error('Description cannot be empty');
+  }
+
+  await setMessages(db, id, chat.messages, chat.urlId, description, chat.timestamp);
+}

app/lib/persistence/index.ts

@@ -0,0 +1,2 @@
+export * from './db';
+export * from './useChatHistory';

app/lib/persistence/useChatHistory.ts

@@ -0,0 +1,176 @@
+import { useLoaderData, useNavigate, useSearchParams } from '@remix-run/react';
+import { useState, useEffect } from 'react';
+import { atom } from 'nanostores';
+import type { Message } from 'ai';
+import { toast } from 'react-toastify';
+import { workbenchStore } from '~/lib/stores/workbench';
+import {
+  getMessages,
+  getNextId,
+  getUrlId,
+  openDatabase,
+  setMessages,
+  duplicateChat,
+  createChatFromMessages,
+} from './db';
+
+export interface ChatHistoryItem {
+  id: string;
+  urlId?: string;
+  description?: string;
+  messages: Message[];
+  timestamp: string;
+}
+
+const persistenceEnabled = !import.meta.env.VITE_DISABLE_PERSISTENCE;
+
+export const db = persistenceEnabled ? await openDatabase() : undefined;
+
+export const chatId = atom<string | undefined>(undefined);
+export const description = atom<string | undefined>(undefined);
+
+export function useChatHistory() {
+  const navigate = useNavigate();
+  const { id: mixedId } = useLoaderData<{ id?: string }>();
+  const [searchParams] = useSearchParams();
+
+  const [initialMessages, setInitialMessages] = useState<Message[]>([]);
+  const [ready, setReady] = useState<boolean>(false);
+  const [urlId, setUrlId] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (!db) {
+      setReady(true);
+
+      if (persistenceEnabled) {
+        toast.error('Chat persistence is unavailable');
+      }
+
+      return;
+    }
+
+    if (mixedId) {
+      getMessages(db, mixedId)
+        .then((storedMessages) => {
+          if (storedMessages && storedMessages.messages.length > 0) {
+            const rewindId = searchParams.get('rewindTo');
+            const filteredMessages = rewindId
+              ? storedMessages.messages.slice(0, storedMessages.messages.findIndex((m) => m.id === rewindId) + 1)
+              : storedMessages.messages;
+
+            setInitialMessages(filteredMessages);
+            setUrlId(storedMessages.urlId);
+            description.set(storedMessages.description);
+            chatId.set(storedMessages.id);
+          } else {
+            navigate('/', { replace: true });
+          }
+
+          setReady(true);
+        })
+        .catch((error) => {
+          toast.error(error.message);
+        });
+    }
+  }, []);
+
+  return {
+    ready: !mixedId || ready,
+    initialMessages,
+    storeMessageHistory: async (messages: Message[]) => {
+      if (!db || messages.length === 0) {
+        return;
+      }
+
+      const { firstArtifact } = workbenchStore;
+
+      if (!urlId && firstArtifact?.id) {
+        const urlId = await getUrlId(db, firstArtifact.id);
+
+        navigateChat(urlId);
+        setUrlId(urlId);
+      }
+
+      if (!description.get() && firstArtifact?.title) {
+        description.set(firstArtifact?.title);
+      }
+
+      if (initialMessages.length === 0 && !chatId.get()) {
+        const nextId = await getNextId(db);
+
+        chatId.set(nextId);
+
+        if (!urlId) {
+          navigateChat(nextId);
+        }
+      }
+
+      await setMessages(db, chatId.get() as string, messages, urlId, description.get());
+    },
+    duplicateCurrentChat: async (listItemId: string) => {
+      if (!db || (!mixedId && !listItemId)) {
+        return;
+      }
+
+      try {
+        const newId = await duplicateChat(db, mixedId || listItemId);
+        navigate(`/chat/${newId}`);
+        toast.success('Chat duplicated successfully');
+      } catch (error) {
+        toast.error('Failed to duplicate chat');
+        console.log(error);
+      }
+    },
+    importChat: async (description: string, messages: Message[]) => {
+      if (!db) {
+        return;
+      }
+
+      try {
+        const newId = await createChatFromMessages(db, description, messages);
+        window.location.href = `/chat/${newId}`;
+        toast.success('Chat imported successfully');
+      } catch (error) {
+        if (error instanceof Error) {
+          toast.error('Failed to import chat: ' + error.message);
+        } else {
+          toast.error('Failed to import chat');
+        }
+      }
+    },
+    exportChat: async (id = urlId) => {
+      if (!db || !id) {
+        return;
+      }
+
+      const chat = await getMessages(db, id);
+      const chatData = {
+        messages: chat.messages,
+        description: chat.description,
+        exportDate: new Date().toISOString(),
+      };
+
+      const blob = new Blob([JSON.stringify(chatData, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `chat-${new Date().toISOString()}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    },
+  };
+}
+
+function navigateChat(nextId: string) {
+  /**
+   * FIXME: Using the intended navigate function causes a rerender for <Chat /> that breaks the app.
+   *
+   * `navigate(`/chat/${nextId}`, { replace: true });`
+   */
+  const url = new URL(window.location.href);
+  url.pathname = `/chat/${nextId}`;
+
+  window.history.replaceState({}, '', url);
+}