feat(app): improve Add to Chat to attach memory as context (#58)

Author: Antonio Maiolo

.changeset/add-to-chat-memory-context.md

@@ -0,0 +1,11 @@
+---
+"think-app": patch
+---
+
+Improve "Add to Chat" to attach memory as context instead of prepopulating message
+
+- Add AttachedMemoryChips component showing selected memory as removable chip
+- Navigate to /chat instead of / when clicking "Add to Chat"
+- Send attached_memory_ids to backend for explicit context inclusion
+- Label attached memory as "User's Selected Memory" so AI knows which memory user is referring to
+- Preserve attached sources when special handlers run

app/src/components/AttachedMemoryChips.tsx

@@ -0,0 +1,47 @@
+import { X, Globe, FileText } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { chips } from "@/lib/design-tokens";
+import type { AttachedMemory } from "@/types/chat";
+
+interface AttachedMemoryChipsProps {
+  memories: AttachedMemory[];
+  onRemove: (memoryId: number) => void;
+  className?: string;
+}
+
+export function AttachedMemoryChips({
+  memories,
+  onRemove,
+  className,
+}: AttachedMemoryChipsProps) {
+  if (memories.length === 0) return null;
+
+  return (
+    <div className={cn("flex flex-wrap gap-2", className)}>
+      {memories.map((memory) => (
+        <span
+          key={memory.id}
+          className={cn(
+            chips.base,
+            chips.primary,
+            "inline-flex items-center gap-1.5 pl-2.5 pr-1.5"
+          )}
+        >
+          {memory.type === "web" ? (
+            <Globe className="h-3 w-3 shrink-0" />
+          ) : (
+            <FileText className="h-3 w-3 shrink-0" />
+          )}
+          <span className="max-w-[150px] truncate">{memory.title}</span>
+          <button
+            onClick={() => onRemove(memory.id)}
+            className="hover:bg-primary/20 rounded-full p-0.5 transition-colors"
+            title="Remove from context"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </span>
+      ))}
+    </div>
+  );
+}

app/src/components/MemoryDetailPanel.tsx

@@ -82,7 +82,7 @@ export function MemoryDetailPanel({
 
   const titleInputRef = useRef<HTMLInputElement>(null);
   const navigate = useNavigate();
-  const { startNewChat, setPendingMessage } = useConversation();
+  const { startNewChat, addAttachedMemory } = useConversation();
 
   // Listen for SSE updates to refresh memory data (e.g., after summary regeneration)
   useMemoryEvents({
@@ -227,12 +227,16 @@ export function MemoryDetailPanel({
 
   const handleAddToConversation = () => {
     if (!memory) return;
-    // Set pending message and navigate to home
-    const prompt = `Tell me about "${memory.title}"`;
-    setPendingMessage(prompt);
+    // Clear first, then attach memory (order matters - startNewChat clears attachments)
     startNewChat();
+    addAttachedMemory({
+      id: memory.id,
+      title: memory.title,
+      type: memory.type,
+      url: memory.url || undefined,
+    });
     onClose();
-    navigate("/");
+    navigate("/chat");
   };
 
   const handleRemoveTag = async (tagId: number) => {

app/src/contexts/ConversationContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useState, useCallback, useMemo, ReactNode } from "react";
 import { apiFetch } from "@/lib/api";
-import type { Conversation, ChatMessage, ConversationDetail, SourceMemory, TokenUsage } from "@/types/chat";
+import type { Conversation, ChatMessage, ConversationDetail, SourceMemory, TokenUsage, AttachedMemory } from "@/types/chat";
 
 interface ConversationContextType {
   currentConversationId: number | null;
@@ -11,6 +11,7 @@ interface ConversationContextType {
   estimatedTokens: number;  // Estimated conversation tokens (stable, grows with messages)
   billingUsage: TokenUsage | null;  // Cumulative (for cost tracking)
   contextWindow: number;
+  attachedMemories: AttachedMemory[];
   selectConversation: (conversation: Conversation | null) => void;
   startNewChat: () => void;
   setCurrentConversationId: (id: number | null) => void;
@@ -19,6 +20,9 @@ interface ConversationContextType {
   clearMessages: () => void;
   setPendingMessage: (message: string | null) => void;
   updateContextWindow: (contextWindow: number) => void;
+  addAttachedMemory: (memory: AttachedMemory) => void;
+  removeAttachedMemory: (memoryId: number) => void;
+  clearAttachedMemories: () => void;
 }
 
 const ConversationContext = createContext<ConversationContextType | null>(null);
@@ -37,6 +41,7 @@ export function ConversationProvider({ children }: { children: ReactNode }) {
   const [pendingMessage, setPendingMessage] = useState<string | null>(null);
   const [billingUsage, setBillingUsage] = useState<TokenUsage | null>(null);  // Cumulative
   const [contextWindow, setContextWindow] = useState(128000);
+  const [attachedMemories, setAttachedMemories] = useState<AttachedMemory[]>([]);
 
   // Estimate conversation tokens from messages (stable, grows with conversation)
   const estimatedTokens = useMemo(() => {
@@ -121,6 +126,7 @@ export function ConversationProvider({ children }: { children: ReactNode }) {
     setCurrentConversationId(null);
     setMessages([]);
     setBillingUsage(null);
+    setAttachedMemories([]);
   }, []);
 
   const addMessage = useCallback((message: ChatMessage) => {
@@ -137,6 +143,22 @@ export function ConversationProvider({ children }: { children: ReactNode }) {
     setMessages([]);
   }, []);
 
+  const addAttachedMemory = useCallback((memory: AttachedMemory) => {
+    setAttachedMemories((prev) => {
+      // Prevent duplicates
+      if (prev.some((m) => m.id === memory.id)) return prev;
+      return [...prev, memory];
+    });
+  }, []);
+
+  const removeAttachedMemory = useCallback((memoryId: number) => {
+    setAttachedMemories((prev) => prev.filter((m) => m.id !== memoryId));
+  }, []);
+
+  const clearAttachedMemories = useCallback(() => {
+    setAttachedMemories([]);
+  }, []);
+
   return (
     <ConversationContext.Provider
       value={{
@@ -148,6 +170,7 @@ export function ConversationProvider({ children }: { children: ReactNode }) {
         estimatedTokens,
         billingUsage,
         contextWindow,
+        attachedMemories,
         selectConversation,
         startNewChat,
         setCurrentConversationId,
@@ -156,6 +179,9 @@ export function ConversationProvider({ children }: { children: ReactNode }) {
         clearMessages,
         setPendingMessage,
         updateContextWindow,
+        addAttachedMemory,
+        removeAttachedMemory,
+        clearAttachedMemories,
       }}
     >
       {children}

app/src/pages/ChatPage.tsx

@@ -5,6 +5,7 @@ import { ChatMessageList } from "@/components/ChatMessageList";
 import { ChatSidebar } from "@/components/ChatSidebar";
 import { ChatSourcesPanel } from "@/components/ChatSourcesPanel";
 import { ContextUsageIndicator } from "@/components/ContextUsageIndicator";
+import { AttachedMemoryChips } from "@/components/AttachedMemoryChips";
 import { useConversation } from "@/contexts/ConversationContext";
 import { useConversations } from "@/hooks/useConversations";
 import type { ChatMessage } from "@/types/chat";
@@ -31,13 +32,16 @@ export default function ChatPage() {
     estimatedTokens,
     billingUsage,
     contextWindow,
+    attachedMemories,
     setCurrentConversationId,
     addMessage,
     updateMessage,
     selectConversation,
     startNewChat,
     setPendingMessage,
     updateContextWindow,
+    removeAttachedMemory,
+    clearAttachedMemories,
   } = useConversation();
 
   const { conversations } = useConversations();
@@ -58,6 +62,10 @@ export default function ChatPage() {
     // Clear previous follow-up suggestions when sending a new message
     setFollowupSuggestions([]);
 
+    // Capture attached memories before clearing (they're consumed with this message)
+    const memoriesToSend = [...attachedMemories];
+    clearAttachedMemories();
+
     // FIX: Handle conversation ID race condition
     // If no conversation ID and another message is already creating one, wait for it
     let effectiveConversationId = conversationId;
@@ -109,6 +117,7 @@ export default function ChatPage() {
         body: JSON.stringify({
           message: userMessage.content,
           conversation_id: effectiveConversationId,
+          attached_memory_ids: memoriesToSend.length > 0 ? memoriesToSend.map((m) => m.id) : undefined,
         }),
       });
 
@@ -216,7 +225,7 @@ export default function ChatPage() {
       // Clear pending conversation ref
       pendingConversationRef.current = null;
     }
-  }, [addMessage, updateMessage, setCurrentConversationId, updateContextWindow]);
+  }, [addMessage, updateMessage, setCurrentConversationId, updateContextWindow, attachedMemories, clearAttachedMemories]);
 
   // Handler for manual chat input
   const handleChat = useCallback(() => {
@@ -240,11 +249,12 @@ export default function ChatPage() {
   useEffect(() => {
     if (isStartingNewChatRef.current) return;
     if (wantsNewChatRef.current) return;
+    if (attachedMemories.length > 0) return; // Don't auto-load if memories attached
     if (currentConversationId || messages.length > 0) return;
     if (conversations.length === 0) return;
 
     selectConversation(conversations[0]);
-  }, [currentConversationId, conversations, messages.length, selectConversation]);
+  }, [currentConversationId, conversations, messages.length, selectConversation, attachedMemories.length]);
 
   return (
     <div className="flex h-full">
@@ -273,14 +283,26 @@ export default function ChatPage() {
         {/* Floating input at bottom */}
         <div className="flex-none p-4">
           <div className="max-w-2xl mx-auto">
+            {/* Attached memory chips */}
+            {attachedMemories.length > 0 && (
+              <AttachedMemoryChips
+                memories={attachedMemories}
+                onRemove={removeAttachedMemory}
+                className="mb-2"
+              />
+            )}
             <div className="flex items-center gap-2">
               <div className="flex-1">
                 <ChatInput
                   value={message}
                   onChange={setMessage}
                   onSubmit={handleChat}
                   isLoading={isLoading}
-                  placeholder="Type your message..."
+                  placeholder={
+                    attachedMemories.length > 0
+                      ? `Ask about ${attachedMemories[0].title}...`
+                      : "Type your message..."
+                  }
                 />
               </div>
               <ContextUsageIndicator

app/src/types/chat.ts

@@ -6,6 +6,13 @@ export interface SourceMemory {
   url?: string;
 }
 
+export interface AttachedMemory {
+  id: number;
+  title: string;
+  type: "web" | "note";
+  url?: string;
+}
+
 export interface TokenUsage {
   prompt_tokens: number;
   completion_tokens: number;