diff --git a/backend/.env.example b/backend/.env.example index b4f3622..9cd561f 100644 --- a/backend/.env.example +++ b/backend/.env.example @@ -1,3 +1,4 @@ PORT=3000 TAVILY_API_KEY=tvly-...... -GOOGLE_AI_API_KEY=AI........ \ No newline at end of file +GOOGLE_AI_API_KEY=AI........ +MONGODB_URI= \ No newline at end of file diff --git a/backend/package.json b/backend/package.json index a873a76..2da0b43 100644 --- a/backend/package.json +++ b/backend/package.json @@ -16,9 +16,12 @@ "dependencies": { "@tavily/core": "^0.0.2", "@types/cors": "^2.8.17", + "@types/mongoose": "^5.11.96", "cors": "^2.8.5", "dotenv": "^16.4.1", "express": "^4.18.2", + "mongodb": "^6.13.0", + "mongoose": "^8.10.1", "openai": "^4.26.0" }, "devDependencies": { diff --git a/backend/src/config/database.ts b/backend/src/config/database.ts new file mode 100644 index 0000000..38d61f9 --- /dev/null +++ b/backend/src/config/database.ts @@ -0,0 +1,12 @@ +import mongo from 'mongoose'; + +export const connectDatabase = async () => { + try { + const connection = await mongo.connect(process.env.MONGODB_URI!); + console.log('MongoDB connected:', connection.connection.host); + return connection; + } catch (e) { + console.error('MongoDB connection error:', e); + throw e; + } +}; diff --git a/backend/src/models/SearchQuery.ts b/backend/src/models/SearchQuery.ts new file mode 100644 index 0000000..6eed470 --- /dev/null +++ b/backend/src/models/SearchQuery.ts @@ -0,0 +1,124 @@ +import mongoose from 'mongoose'; + +const searchQuerySchema = new mongoose.Schema( + { + query: { + type: String, + required: true, + }, + timestamp: { + type: Date, + default: Date.now, + }, + status: { + type: String, + enum: ['success', 'error'], + default: 'success', + }, + ipHash: { + type: String, + }, + userAgent: { + type: String, + }, + sessionId: { + type: String, + }, + followUpMode: { + type: String, + enum: ['expansive', 'focused'], + }, + concept: String, + parentSearchId: { + type: mongoose.Schema.Types.ObjectId, + ref: 'SearchQuery', + }, + conversationHistory: [ + { + query: String, + nodeId: String, + response: { + response: String, + followUpQuestions: [String], + contextualQuery: String, + sources: [ + { + title: String, + url: String, + uri: String, + author: String, + image: String, + }, + ], + images: [ + { + url: String, + thumbnail: String, + description: String, + }, + ], + }, + timestamp: { + type: Date, + default: Date.now, + }, + }, + ], + currentNodes: [ + { + id: String, + type: String, + data: mongoose.Schema.Types.Mixed, + position: { + x: Number, + y: Number, + }, + style: mongoose.Schema.Types.Mixed, + }, + ], + currentEdges: [ + { + id: String, + source: String, + target: String, + type: String, + style: mongoose.Schema.Types.Mixed, + }, + ], + searchResults: { + response: String, + followUpQuestions: [String], + contextualQuery: String, + sources: [ + { + title: String, + url: String, + uri: String, + author: String, + image: String, + }, + ], + images: [ + { + url: String, + thumbnail: String, + description: String, + }, + ], + }, + error: { + type: String, + }, + }, + { + timestamps: true, + } +); + +searchQuerySchema.index({ timestamp: -1 }); +searchQuerySchema.index({ status: 1 }); +searchQuerySchema.index({ ipHash: 1 }); + +export const SearchQuery = + mongoose.models.SearchQuery || + mongoose.model('SearchQuery', searchQuerySchema); diff --git a/backend/src/routes/rabbithole.ts b/backend/src/routes/rabbithole.ts index b5f5c71..4161100 100644 --- a/backend/src/routes/rabbithole.ts +++ b/backend/src/routes/rabbithole.ts @@ -1,139 +1,288 @@ -import express from "express"; -import { tavily } from "@tavily/core"; -import { openAIService } from "../services/openaiService"; -import OpenAI from "openai"; +import express from 'express'; +import crypto from 'crypto'; +import { tavily } from '@tavily/core'; +import { openAIService } from '../services/openaiService'; +import { SearchQuery } from '../models/SearchQuery'; +import OpenAI from 'openai'; interface RabbitHoleSearchRequest { - query: string; - previousConversation?: Array<{ - user?: string; - assistant?: string; - }>; - concept?: string; - followUpMode?: "expansive" | "focused"; + query: string; + previousConversation?: Array<{ + user?: string; + assistant?: string; + }>; + concept?: string; + followUpMode?: 'expansive' | 'focused'; + parentSearchId?: string; } interface SearchResponse { - response: string; - followUpQuestions: string[]; - contextualQuery: string; - sources: Array<{ - title: string; - url: string; - uri: string; - author: string; - image: string; - }>; - images: Array<{ - url: string; - thumbnail: string; - description: string; - }>; + response: string; + followUpQuestions: string[]; + contextualQuery: string; + sources: Array<{ + title: string; + url: string; + uri: string; + author: string; + image: string; + }>; + images: Array<{ + url: string; + thumbnail: string; + description: string; + }>; } +//Hash IP Address +const hashIP = (ip: string): string => { + return crypto.createHash('sha256').update(ip).digest('hex'); +}; + export function setupRabbitHoleRoutes(_runtime: any) { - const router = express.Router(); - const tavilyClient = tavily({ apiKey: process.env.TAVILY_API_KEY }); + const router = express.Router(); + const tavilyClient = tavily({ apiKey: process.env.TAVILY_API_KEY }); + + router.post( + '/rabbitholes/search', + async (req: express.Request, res: express.Response) => { + try { + const { + query, + previousConversation, + concept, + followUpMode = 'expansive', + parentSearchId, + } = req.body as RabbitHoleSearchRequest; + + const clientIp = req.ip || req.headers['x-forwarded-for'] || 'unknown'; - router.post("/rabbitholes/search", async (req: express.Request, res: express.Response) => { try { - const { - query, - previousConversation, - concept, - followUpMode = "expansive", - } = req.body as RabbitHoleSearchRequest; - - const searchResults = await tavilyClient.search(query, { - searchDepth: "basic", - includeImages: true, - maxResults: 3, - }); + const searchResults = await tavilyClient.search(query, { + searchDepth: 'basic', + includeImages: true, + maxResults: 3, + }); - const conversationContext = previousConversation - ? previousConversation - .map( - (msg) => - (msg.user ? `User: ${msg.user}\n` : "") + - (msg.assistant ? `Assistant: ${msg.assistant}\n` : "") - ) - .join("\n") - : ""; - - const messages = [ - { - role: "system", - content: `You are an AI assistant that helps users explore topics in depth. Format your responses using markdown with headers (####). + // Process conversationContext + const conversationContext = previousConversation + ? previousConversation + .map( + (msg) => + (msg.user ? `User: ${msg.user}\n` : '') + + (msg.assistant ? `Assistant: ${msg.assistant}\n` : '') + ) + .join('\n') + : ''; + + // Prepare messages for OpenAI + const messages = [ + { + role: 'system', + content: `You are an AI assistant that helps users explore topics in depth. Format your responses using markdown with headers (####). + + Your goal is to provide comprehensive, accurate information while maintaining engagement. + Base your response on the search results provided, and structure it clearly with relevant sections. + + After your main response, include a "Follow-up Questions:" section with 3 concise questions that would help users explore the topic further. + One of the questions should be a question that is related to the search results, and the other two should be either thought provoking questions or devil's advocate/conspiracy questions. + `, + }, + { + role: 'user', + content: `Previous conversation:\n${conversationContext}\n\nSearch results about "${query}":\n${JSON.stringify( + searchResults + )}\n\nPlease provide a comprehensive response about ${ + concept || query + }. Include relevant facts, context, and relationships to other topics. Format the response in markdown with #### headers. The response should be ${ + followUpMode === 'expansive' + ? 'broad and exploratory' + : 'focused and specific' + }.`, + }, + ]; + + const completion = (await openAIService.createChatCompletion( + messages, + 'gemini' + )) as OpenAI.Chat.ChatCompletion; + const response = completion.choices?.[0]?.message?.content ?? ''; + + // Extract follow-up questions + const followUpSection = response.split('Follow-up Questions:')[1]; + const followUpQuestions = followUpSection + ? followUpSection + .trim() + .split('\n') + .filter((line) => line.trim()) + .map((line) => line.replace(/^\d+\.\s+/, '').trim()) + .filter((line) => line.includes('?')) + .slice(0, 3) + : []; -Your goal is to provide comprehensive, accurate information while maintaining engagement. -Base your response on the search results provided, and structure it clearly with relevant sections. + // Get main response without follow-up questions + const mainResponse = response.split('Follow-up Questions:')[0].trim(); -After your main response, include a "Follow-up Questions:" section with 3 consice questions that would help users explore the topic further. -One of the questions should be a question that is related to the search results, and the other two should be either thought provoking questions or devil's advocate/conspiracy questions. -`, + // Process sources and images + const sources = searchResults.results.map((result: any) => ({ + title: result.title || '', + url: result.url || '', + uri: result.url || '', + author: result.author || '', + image: result.image || '', + })); + + const images = searchResults.images.map((result: any) => ({ + url: result.url, + thumbnail: result.url, + description: result.description || '', + })); + + const searchResponse: SearchResponse = { + response: mainResponse, + followUpQuestions, + contextualQuery: query, + sources, + images, + }; + + if (parentSearchId) { + const updatedSearch = await SearchQuery.findByIdAndUpdate( + parentSearchId, + { + $push: { + conversationHistory: { + query, + response: searchResponse, + }, }, + }, + { new: true } + ).select('query timestamp conversationHistory'); + + if (!updatedSearch) { + throw new Error('Parent search not found'); + } + + res.json({ + ...searchResponse, + searchId: parentSearchId, + conversationHistory: updatedSearch.conversationHistory, + }); + } else { + const searchQuery = await SearchQuery.create({ + query, + ipHash: hashIP( + typeof clientIp === 'string' ? clientIp : 'unknown' + ), + userAgent: req.headers['user-agent'] || 'unknown', + sessionId: req.headers['x-session-id'] || undefined, + followUpMode, + concept, + searchResults: searchResponse, + conversationHistory: [ { - role: "user", - content: `Previous conversation:\n${conversationContext}\n\nSearch results about "${query}":\n${JSON.stringify( - searchResults - )}\n\nPlease provide a comprehensive response about ${ - concept || query - }. Include relevant facts, context, and relationships to other topics. Format the response in markdown with #### headers. The response should be ${ - followUpMode === "expansive" ? "broad and exploratory" : "focused and specific" - }.`, + query, + response: searchResponse, }, - ]; - - const completion = (await openAIService.createChatCompletion(messages, "gemini")) as OpenAI.Chat.ChatCompletion; - const response = completion.choices?.[0]?.message?.content ?? ""; - - // Extract follow-up questions more precisely by looking for the section - const followUpSection = response.split("Follow-up Questions:")[1]; - const followUpQuestions = followUpSection - ? followUpSection - .trim() - .split("\n") - .filter((line) => line.trim()) - .map((line) => line.replace(/^\d+\.\s+/, "").trim()) - .filter((line) => line.includes("?")) - .slice(0, 3) - : []; - - // Remove the Follow-up Questions section from the main response - const mainResponse = response.split("Follow-up Questions:")[0].trim(); - - const sources = searchResults.results.map((result: any) => ({ - title: result.title || "", - url: result.url || "", - uri: result.url || "", - author: result.author || "", - image: result.image || "", - })); - - const images = searchResults.images - .map((result: any) => ({ - url: result.url, - thumbnail: result.url, - description: result.description || "", - })); - - const searchResponse: SearchResponse = { - response: mainResponse, - followUpQuestions, - contextualQuery: query, - sources, - images, - }; - - res.json(searchResponse); - } catch (error) { - console.error("Error in rabbithole search endpoint:", error); - res.status(500).json({ - error: "Failed to process search request", - details: (error as Error).message, + ], }); + + res.json({ + ...searchResponse, + searchId: searchQuery._id, + conversationHistory: searchQuery.conversationHistory, + }); + } + } catch (tavilyError) { + // Handle Tavily API errors + console.error('Tavily API error:', tavilyError); + if (tavilyError instanceof Error) { + throw new Error(`Search service error: ${tavilyError.message}`); + } else { + throw new Error('Search service error'); + } + } + } catch (error) { + if (req.body.query) { + try { + const clientIp = + req.ip || req.headers['x-forwarded-for'] || 'unknown'; + + await SearchQuery.create({ + query: req.body.query, + ipHash: hashIP( + typeof clientIp === 'string' ? clientIp : 'unknown' + ), + userAgent: req.headers['user-agent'] || 'unknown', + status: 'error', + error: (error as Error).message, + }); + } catch (dbError) { + console.error('Error saving failed search:', dbError); + } + } + + console.error('Error in rabbithole search endpoint:', error); + + if ((error as Error).message.includes('429')) { + res.status(429).json({ + error: + 'Service is temporarily busy. Please try again in a few seconds.', + retryAfter: '5 seconds', + }); + } else { + res.status(500).json({ + error: 'Failed to process search request', + details: (error as Error).message, + }); } - }); + } + } + ); - return router; -} \ No newline at end of file + router.get( + '/rabbitholes/recent-searches', + async (req: express.Request, res: express.Response) => { + try { + const recentSearches = await SearchQuery.find({ status: 'success' }) + .select('query timestamp searchResults conversationHistory') + .sort({ timestamp: -1 }) + .limit(5); + + res.json(recentSearches); + } catch (error) { + console.error('Error fetching recent searches:', error); + res.status(500).json({ + error: 'Failed to fetch recent searches', + details: (error as Error).message, + }); + } + } + ); + + router.get( + '/rabbitholes/search/:id', + async (req: express.Request, res: express.Response) => { + try { + const search = await SearchQuery.findById(req.params.id).select( + 'query timestamp searchResults conversationHistory' + ); + + if (!search) { + return res.status(404).json({ error: 'Search not found' }); + } + + res.json(search); + } catch (error) { + console.error('Error fetching search details:', error); + res.status(500).json({ + error: 'Failed to fetch search details', + details: (error as Error).message, + }); + } + } + ); + + return router; +} diff --git a/backend/src/server.ts b/backend/src/server.ts index 7ebf1bf..becf3fd 100644 --- a/backend/src/server.ts +++ b/backend/src/server.ts @@ -2,6 +2,7 @@ import express from 'express'; import cors from 'cors'; import dotenv from 'dotenv'; import path from 'path'; +import { connectDatabase } from './config/database'; import { setupRabbitHoleRoutes } from './routes/rabbithole'; dotenv.config(); @@ -9,11 +10,15 @@ dotenv.config(); const app = express(); const port = process.env.PORT || 3000; -app.use(cors({ - origin: '*', - methods: ['GET', 'POST'], - allowedHeaders: ['Content-Type'] -})); +connectDatabase(); + +app.use( + cors({ + origin: '*', + methods: ['GET', 'POST'], + allowedHeaders: ['Content-Type'], + }) +); app.use(express.json()); // Add health check endpoint @@ -31,11 +36,18 @@ app.get('*', (req, res) => { res.sendFile(path.join(__dirname, '../../frontend/build/index.html')); }); -app.use((err: Error, req: express.Request, res: express.Response, next: express.NextFunction) => { - console.error(err.stack); - res.status(500).json({ error: 'Something broke!' }); -}); +app.use( + ( + err: Error, + req: express.Request, + res: express.Response, + next: express.NextFunction + ) => { + console.error(err.stack); + res.status(500).json({ error: 'Something broke!' }); + } +); app.listen(port, () => { console.log(`Server is running on port ${port}`); -}); \ No newline at end of file +}); diff --git a/frontend/src/components/RabbitFlow.tsx b/frontend/src/components/RabbitFlow.tsx index 4ee4154..557a476 100644 --- a/frontend/src/components/RabbitFlow.tsx +++ b/frontend/src/components/RabbitFlow.tsx @@ -17,6 +17,7 @@ import ReactFlow, { ConnectionLineType, Position, MiniMap, + MarkerType, } from 'reactflow'; import dagre from '@dagrejs/dagre'; import 'reactflow/dist/style.css'; @@ -26,31 +27,34 @@ interface RabbitFlowProps { initialEdges: Edge[]; nodeTypes: NodeTypes; onNodeClick?: (node: Node) => void; + conversationHistory?: any[]; } const getLayoutedElements = (nodes: Node[], edges: Edge[]) => { const dagreGraph = new dagre.graphlib.Graph(); dagreGraph.setDefaultEdgeLabel(() => ({})); - + // Check if any nodes are expanded - const hasExpandedNodes = nodes.some(node => node.type === 'mainNode' && node.data.isExpanded); - - dagreGraph.setGraph({ + const hasExpandedNodes = nodes.some( + (node) => node.type === 'mainNode' && node.data.isExpanded + ); + + dagreGraph.setGraph({ rankdir: 'LR', nodesep: 100, - ranksep: hasExpandedNodes ? 200 : 100, // Adjust vertical spacing based on expansion + ranksep: hasExpandedNodes ? 200 : 100, // Adjust vertical spacing based on expansion marginx: 200, marginy: hasExpandedNodes ? 200 : 100, align: 'UL', - ranker: 'tight-tree' + ranker: 'tight-tree', }); // Add nodes to the graph with their actual dimensions nodes.forEach((node) => { const isMainNode = node.type === 'mainNode'; - dagreGraph.setNode(node.id, { + dagreGraph.setNode(node.id, { width: isMainNode ? 600 : 300, - height: isMainNode ? 500 : 100 + height: isMainNode ? 500 : 100, }); }); @@ -79,14 +83,29 @@ const getLayoutedElements = (nodes: Node[], edges: Edge[]) => { }; }); - return { nodes: newNodes, edges }; + const newEdges = edges.map((edge) => ({ + ...edge, + type: 'default', + animated: true, + style: { + stroke: 'rgba(248, 248, 248, 0.8)', + strokeWidth: 1.5, + }, + markerEnd: { + type: MarkerType.ArrowClosed, + color: 'rgba(248, 248, 248, 0.8)', + }, + })); + + return { nodes: newNodes, edges: newEdges }; }; const RabbitFlow: React.FC = ({ initialNodes, initialEdges, nodeTypes, - onNodeClick + onNodeClick, + conversationHistory = [], }) => { const [nodes, setNodes, onNodesChange] = useNodesState([]); const [edges, setEdges, onEdgesChange] = useEdgesState([]); @@ -100,15 +119,131 @@ const RabbitFlow: React.FC = ({ setEdges(layoutedEdges); }, [initialNodes, initialEdges]); + React.useEffect(() => { + if (conversationHistory?.length) { + // Create nodes and edges from conversation history + const historyNodes = conversationHistory.map((item, index) => ({ + id: `history-${index}`, + type: 'mainNode', + data: { + label: item.query, + content: item.response.response, + images: item.response.images?.map((img: any) => img.url), + sources: item.response.sources, + isExpanded: true, + }, + position: { x: 0, y: 0 }, // Will be positioned by dagre + style: { + width: 600, + minHeight: 500, + background: '#1a1a1a', + color: '#fff', + border: '1px solid #333', + borderRadius: '8px', + boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', + cursor: 'default', + }, + })); + + // Create question nodes for each history item + const questionNodes: Node[] = []; + const questionEdges: Edge[] = []; + + conversationHistory.forEach((item, index) => { + const parentId = `history-${index}`; + + item.response.followUpQuestions.forEach( + (question: string, qIndex: number) => { + const questionId = `question-${parentId}-${qIndex}`; + + questionNodes.push({ + id: questionId, + type: 'default', + data: { + label: question, + isExpanded: false, + content: '', + images: [], + sources: [], + }, + position: { x: 0, y: 0 }, + style: { + width: 300, + background: '#1a1a1a', + color: '#fff', + border: '1px solid #333', + borderRadius: '8px', + fontSize: '14px', + textAlign: 'left', + boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', + cursor: 'pointer', + }, + }); + + questionEdges.push({ + id: `edge-${questionId}`, + source: parentId, + target: questionId, + type: 'default', + animated: true, + style: { + stroke: 'rgba(248, 248, 248, 0.8)', + strokeWidth: 1.5, + }, + markerEnd: { + type: MarkerType.ArrowClosed, + color: 'rgba(248, 248, 248, 0.8)', + }, + }); + } + ); + }); + + // Create edges between history nodes + const historyEdges = conversationHistory.slice(1).map((_, index) => ({ + id: `history-edge-${index}`, + source: `history-${index}`, + target: `history-${index + 1}`, + type: 'default', + animated: true, + style: { + stroke: 'rgba(248, 248, 248, 0.8)', + strokeWidth: 1.5, + }, + markerEnd: { + type: MarkerType.ArrowClosed, + color: 'rgba(248, 248, 248, 0.8)', + }, + })); + + const { nodes: layoutedNodes, edges: layoutedEdges } = + getLayoutedElements( + [...historyNodes, ...questionNodes], + [...historyEdges, ...questionEdges] + ); + + setNodes(layoutedNodes); + setEdges(layoutedEdges); + } + }, [conversationHistory]); + const onConnect = useCallback( - (params: Connection) => - setEdges((eds) => + (params: Connection) => + setEdges((eds) => addEdge( - { - ...params, - type: ConnectionLineType.SmoothStep, - animated: true - }, + { + ...params, + type: 'default', + animated: true, + style: { + stroke: 'rgba(248, 248, 248, 0.8)', + strokeWidth: 1.5, + }, + markerEnd: { + type: MarkerType.ArrowClosed, + color: 'rgba(248, 248, 248, 0.8)', + }, + }, eds ) ), @@ -134,10 +269,11 @@ const RabbitFlow: React.FC = ({ onConnect={onConnect} onNodeClick={handleNodeClick} nodeTypes={nodeTypes} - connectionLineType={ConnectionLineType.SmoothStep} - defaultEdgeOptions={{ + connectionLineType={ConnectionLineType.Bezier} + defaultEdgeOptions={{ + type: 'default', animated: true, - style: { stroke: 'rgba(255, 255, 255, 0.3)' } + style: { stroke: 'rgba(255, 255, 255, 0.3)' }, }} fitView zoomOnScroll={true} @@ -146,10 +282,8 @@ const RabbitFlow: React.FC = ({ preventScrolling={false} style={{ backgroundColor: '#000000' }} > - - + = ({ maskColor="rgba(0, 0, 0, 0.7)" className="!bottom-4 !right-4" /> - @@ -170,4 +304,4 @@ const RabbitFlow: React.FC = ({ ); }; -export default RabbitFlow; \ No newline at end of file +export default RabbitFlow; diff --git a/frontend/src/components/RecentSearches.tsx b/frontend/src/components/RecentSearches.tsx new file mode 100644 index 0000000..2c6c585 --- /dev/null +++ b/frontend/src/components/RecentSearches.tsx @@ -0,0 +1,77 @@ +import React from 'react'; +import { BounceCards } from '../components/ui/bounce-cards'; + +interface RecentSearchProps { + searches: any[]; + onSelectSearch: (searchId: string) => void; + className?: string; +} + +const transformStyles = [ + 'rotate(10deg) translate(-170px)', + 'rotate(5deg) translate(-85px)', + 'rotate(-3deg)', + 'rotate(-10deg) translate(85px)', + 'rotate(2deg) translate(170px)', +]; + +export const RecentSearches: React.FC = ({ + searches, + onSelectSearch, + className, +}) => { + if (!searches?.length) return null; + + const searchData = searches + .slice(0, 5) + .filter((search) => search.searchResults?.images?.[0]?.url) + .map((search) => ({ + id: search._id, + imageUrl: search.searchResults.images[0].url, + })); + + // Calculate container width based on number of images + // Each card is 120px wide plus their translations + const containerWidth = Math.max(600, searchData.length * 170); + + const ClickWrapper: React.FC<{ children: React.ReactNode }> = ({ + children, + }) => { + const handleClick = (e: React.MouseEvent) => { + e.stopPropagation(); + const target = e.target as HTMLElement; + const image = target.closest('img'); + if (image) { + const imageUrl = image.getAttribute('src'); + const search = searchData.find((s) => s.imageUrl === imageUrl); + if (search) { + onSelectSearch(search.id); + } + } + }; + + return ( +
+
{children}
+
+ ); + }; + + return ( + + s.imageUrl)} + containerWidth={containerWidth} + containerHeight={150} + animationDelay={0.5} + animationStagger={0.06} + easeType="elastic.out(1, 0.8)" + transformStyles={transformStyles} + className="flex justify-center items-end" + /> + + ); +}; diff --git a/frontend/src/components/SearchView.tsx b/frontend/src/components/SearchView.tsx index 75d94d0..5b8aa81 100644 --- a/frontend/src/components/SearchView.tsx +++ b/frontend/src/components/SearchView.tsx @@ -1,13 +1,17 @@ import React, { useState, useEffect, useRef } from 'react'; -import ReactMarkdown from 'react-markdown'; -import axios from 'axios'; -import ReactFlow, { Node, Edge, MarkerType, Position } from 'reactflow'; + +import { Node, Edge, MarkerType, Position } from 'reactflow'; import dagre from 'dagre'; import gsap from 'gsap'; import RabbitFlow from './RabbitFlow'; import MainNode from './nodes/MainNode'; import '../styles/search.css'; -import { searchRabbitHole } from '../services/api'; +import { + searchRabbitHole, + getRecentSearches, + getSearchById, +} from '../services/api'; +import { RecentSearches } from '../components/RecentSearches'; const dagreGraph = new dagre.graphlib.Graph(); dagreGraph.setDefaultEdgeLabel(() => ({})); @@ -18,22 +22,22 @@ const questionNodeWidth = 300; const questionNodeHeight = 100; const getLayoutedElements = (nodes: Node[], edges: Edge[]) => { - dagreGraph.setGraph({ - rankdir: 'LR', + dagreGraph.setGraph({ + rankdir: 'LR', nodesep: 800, ranksep: 500, marginx: 100, align: 'DL', - ranker: 'tight-tree' + ranker: 'tight-tree', }); const allNodes = dagreGraph.nodes(); - allNodes.forEach(node => dagreGraph.removeNode(node)); + allNodes.forEach((node) => dagreGraph.removeNode(node)); nodes.forEach((node) => { - dagreGraph.setNode(node.id, { + dagreGraph.setNode(node.id, { width: node.id === 'main' ? nodeWidth : questionNodeWidth, - height: node.id === 'main' ? nodeHeight : questionNodeHeight + height: node.id === 'main' ? nodeHeight : questionNodeHeight, }); }); @@ -48,11 +52,15 @@ const getLayoutedElements = (nodes: Node[], edges: Edge[]) => { return { ...node, position: { - x: nodeWithPosition.x - (node.id === 'main' ? nodeWidth / 2 : questionNodeWidth / 2), - y: nodeWithPosition.y - (node.id === 'main' ? nodeHeight / 2 : questionNodeHeight / 2) + x: + nodeWithPosition.x - + (node.id === 'main' ? nodeWidth / 2 : questionNodeWidth / 2), + y: + nodeWithPosition.y - + (node.id === 'main' ? nodeHeight / 2 : questionNodeHeight / 2), }, targetPosition: Position.Left, - sourcePosition: Position.Right + sourcePosition: Position.Right, }; }); @@ -79,11 +87,21 @@ interface SearchResponse { sources: Source[]; images: ImageData[]; contextualQuery: string; + searchId?: string; + currentNodes?: Node[]; + currentEdges?: Edge[]; } interface ConversationMessage { user?: string; assistant?: string; + query?: string; + response?: { + response: string; + followUpQuestions: string[]; + sources: any[]; + images: any[]; + }; } const nodeTypes = { @@ -100,57 +118,65 @@ const useDeckHoverAnimation = (deckRef: React.RefObject) => { let floatingAnimation: gsap.core.Timeline; gsap.set(symbol, { scale: 1 }); - gsap.set(card, { - y: 0, + gsap.set(card, { + y: 0, rotate: 0, - boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)' + boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', }); const createFloatingAnimation = () => { const timeline = gsap.timeline({ repeat: -1, yoyo: true, - defaults: { duration: 2, ease: "power1.inOut" } + defaults: { duration: 2, ease: 'power1.inOut' }, }); const randomRotation = (Math.random() - 0.5) * 10; - + timeline .to(card, { y: -15, x: 5, rotate: randomRotation, boxShadow: '0 20px 30px -10px rgba(0, 0, 0, 0.3)', - duration: 2 + duration: 2, }) .to(card, { y: -10, x: -5, rotate: -randomRotation, boxShadow: '0 15px 25px -8px rgba(0, 0, 0, 0.25)', - duration: 2 + duration: 2, }) .to(card, { y: -20, x: 0, rotate: 0, boxShadow: '0 25px 35px -12px rgba(0, 0, 0, 0.35)', - duration: 2 + duration: 2, }); timeline - .to(symbol, { - scale: 1.1, - rotate: 5, - duration: 3, - ease: "none" - }, 0) - .to(symbol, { - scale: 1.15, - rotate: -5, - duration: 3, - ease: "none" - }, 3); + .to( + symbol, + { + scale: 1.1, + rotate: 5, + duration: 3, + ease: 'none', + }, + 0 + ) + .to( + symbol, + { + scale: 1.15, + rotate: -5, + duration: 3, + ease: 'none', + }, + 3 + ); return timeline; }; @@ -161,10 +187,11 @@ const useDeckHoverAnimation = (deckRef: React.RefObject) => { } floatingAnimation = createFloatingAnimation(); - + gsap.to(card, { - boxShadow: '0 20px 30px -10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.1)', - duration: 0.5 + boxShadow: + '0 20px 30px -10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.1)', + duration: 0.5, }); deck.classList.add('particles-active'); @@ -179,7 +206,7 @@ const useDeckHoverAnimation = (deckRef: React.RefObject) => { scale: 1, rotate: 0, duration: 0.5, - ease: 'power2.out' + ease: 'power2.out', }); gsap.to(card, { @@ -189,7 +216,7 @@ const useDeckHoverAnimation = (deckRef: React.RefObject) => { boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', duration: 0.5, ease: 'power2.out', - clearProps: 'all' // Clear all applied properties + clearProps: 'all', // Clear all applied properties }); deck.classList.remove('particles-active'); @@ -210,29 +237,29 @@ const useDeckHoverAnimation = (deckRef: React.RefObject) => { const DECK_QUESTIONS = { thoth: [ - "What secrets lie in the cosmic patterns of consciousness?", - "How do ancient symbols guide modern wisdom seekers?", - "What hidden knowledge flows through the akashic records?", - "How do celestial alignments influence human consciousness?", - "What mysteries of sacred geometry shape our reality?", - "How does divine wisdom manifest in everyday synchronicities?" + 'What secrets lie in the cosmic patterns of consciousness?', + 'How do ancient symbols guide modern wisdom seekers?', + 'What hidden knowledge flows through the akashic records?', + 'How do celestial alignments influence human consciousness?', + 'What mysteries of sacred geometry shape our reality?', + 'How does divine wisdom manifest in everyday synchronicities?', ], anubis: [ - "What lies beyond the veil between life and death?", - "How do souls navigate the journey through the afterlife?", - "What wisdom do ancestral spirits wish to share?", - "How does death illuminate the meaning of life?", - "What secrets lie in the ancient Egyptian Book of the Dead?", - "How do we bridge the gap between mortal and immortal realms?" + 'What lies beyond the veil between life and death?', + 'How do souls navigate the journey through the afterlife?', + 'What wisdom do ancestral spirits wish to share?', + 'How does death illuminate the meaning of life?', + 'What secrets lie in the ancient Egyptian Book of the Dead?', + 'How do we bridge the gap between mortal and immortal realms?', ], isis: [ - "How does ancient wisdom guide our modern understanding?", - "What forgotten knowledge lies in the temples of antiquity?", - "How do we unlock the mysteries of divine feminine power?", - "What sacred rituals can transform consciousness?", - "How do we balance material and spiritual existence?", - "What ancient healing practices remain relevant today?" - ] + 'How does ancient wisdom guide our modern understanding?', + 'What forgotten knowledge lies in the temples of antiquity?', + 'How do we unlock the mysteries of divine feminine power?', + 'What sacred rituals can transform consciousness?', + 'How do we balance material and spiritual existence?', + 'What ancient healing practices remain relevant today?', + ], } as const; const getRandomQuestion = (category: keyof typeof DECK_QUESTIONS) => { @@ -247,9 +274,14 @@ const SearchView: React.FC = () => { const [nodes, setNodes] = useState([]); const [edges, setEdges] = useState([]); const [isLoading, setIsLoading] = useState(false); - const [conversationHistory, setConversationHistory] = useState([]); + const [conversationHistory, setConversationHistory] = useState< + ConversationMessage[] + >([]); const [currentConcept, setCurrentConcept] = useState(''); - const activeRequestRef = useRef<{ [key: string]: AbortController | null }>({}); + const activeRequestRef = useRef<{ [key: string]: AbortController | null }>( + {} + ); + const [recentSearches, setRecentSearches] = useState([]); const thothDeckRef = useRef(null); const anubisDeckRef = useRef(null); @@ -258,23 +290,34 @@ const SearchView: React.FC = () => { const [deckQuestions, setDeckQuestions] = useState({ thoth: getRandomQuestion('thoth'), anubis: getRandomQuestion('anubis'), - isis: getRandomQuestion('isis') + isis: getRandomQuestion('isis'), }); const refreshDeckQuestion = (category: keyof typeof DECK_QUESTIONS) => { - setDeckQuestions(prev => ({ + setDeckQuestions((prev) => ({ ...prev, - [category]: getRandomQuestion(category) + [category]: getRandomQuestion(category), })); }; + const loadRecentSearches = async () => { + console.log(`loadRecentSearches`); + try { + const data = await getRecentSearches(); + console.log(`data`, data); + setRecentSearches(data); + } catch (error) { + console.error('Error loading recent searches:', error); + } + }; + useDeckHoverAnimation(thothDeckRef); useDeckHoverAnimation(anubisDeckRef); useDeckHoverAnimation(isisDeckRef); useEffect(() => { return () => { - Object.values(activeRequestRef.current).forEach(controller => { + Object.values(activeRequestRef.current).forEach((controller) => { if (controller) { controller.abort(); } @@ -282,11 +325,184 @@ const SearchView: React.FC = () => { }; }, []); + useEffect(() => { + loadRecentSearches(); + }, []); + + const loadPreviousSearch = async (searchId: string) => { + try { + setIsLoading(true); + const response = await getSearchById(searchId); + + if (!response) { + throw new Error('Failed to load search'); + } + + setQuery(response.query || ''); + setCurrentConcept(response.concept || ''); + + // Ensure conversation history has the correct structure + const validConversationHistory = (response.conversationHistory || []).map( + (item: any) => ({ + query: item.query, + response: item.response, + user: item.query, + assistant: item.response?.response, + }) + ); + + setConversationHistory(validConversationHistory); + setSearchResult(response.searchResults); + + // Create nodes from conversation history + if (validConversationHistory.length > 0) { + const historyNodes = validConversationHistory.map( + (item: ConversationMessage, index: number) => ({ + id: `history-${index}`, + type: 'mainNode', + data: { + label: item.query || '', + content: item.response?.response || '', + images: item.response?.images?.map((img: any) => img.url) || [], + sources: item.response?.sources || [], + isExpanded: true, + }, + position: { x: 0, y: 0 }, + style: { + width: 600, + minHeight: 500, + background: '#1a1a1a', + color: '#fff', + border: '1px solid #333', + borderRadius: '8px', + boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', + cursor: 'default', + }, + }) + ); + + const historyEdges = validConversationHistory + .slice(1) + .map((_: any, index: number) => ({ + id: `history-edge-${index}`, + source: `history-${index}`, + target: `history-${index + 1}`, + type: 'smoothstep', + animated: true, + style: { + stroke: 'rgba(248, 248, 248, 0.8)', + strokeWidth: 1.5, + }, + markerEnd: { + type: MarkerType.ArrowClosed, + color: 'rgba(248, 248, 248, 0.8)', + }, + })); + + const { nodes: layoutedNodes, edges: layoutedEdges } = + getLayoutedElements(historyNodes, historyEdges); + + setNodes(layoutedNodes); + setEdges(layoutedEdges); + } + } catch (error) { + console.error('Failed to load search:', error); + } finally { + setIsLoading(false); + } + }; + + const handleSearch = async () => { + if (!query.trim()) return; + + try { + setIsLoading(true); + + // Create initial loading node + const loadingNode: Node = { + id: 'main', + type: 'mainNode', + data: { + label: query, + content: 'Loading...', + images: [], + sources: [], + isExpanded: true, + }, + position: { x: 0, y: 0 }, + style: { + width: 600, + height: 500, + background: '#1a1a1a', + color: '#fff', + border: '1px solid #333', + borderRadius: '8px', + boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', + cursor: 'default', + }, + }; + + setNodes([loadingNode]); + setEdges([]); + + const response = await searchRabbitHole({ + query, + previousConversation: conversationHistory, + concept: currentConcept, + followUpMode: 'expansive', + }); + + if (!response) { + throw new Error('Search failed to return a response'); + } + + setSearchResult(response); + + // Add to conversation history with proper structure + const newHistoryEntry: ConversationMessage = { + query: query, + response: response, + user: query, + assistant: response.response, + }; + + setConversationHistory((prev) => [...prev, newHistoryEntry]); + + // Create main node with response data + const mainNode: Node = { + ...loadingNode, + data: { + label: response.contextualQuery || query, + content: response.response, + images: response.images?.map((img: any) => img.url) || [], + sources: response.sources || [], + isExpanded: true, + }, + }; + + // Create follow-up nodes and edges + const { nodes: layoutedNodes, edges: layoutedEdges } = + getLayoutedElements([mainNode], []); + + setNodes(layoutedNodes); + setEdges(layoutedEdges); + + await loadRecentSearches(); + } catch (error) { + console.error('Search failed:', error); + // Handle error state appropriately + } finally { + setIsLoading(false); + } + }; + const handleNodeClick = async (node: Node) => { if (!node.id.startsWith('question-') || node.data.isExpanded) return; // Check if there are any active requests - const hasActiveRequests = Object.values(activeRequestRef.current).some(controller => controller !== null); + const hasActiveRequests = Object.values(activeRequestRef.current).some( + (controller) => controller !== null + ); if (hasActiveRequests) return; if (activeRequestRef.current[node.id]) { @@ -300,45 +516,62 @@ const SearchView: React.FC = () => { setIsLoading(true); try { - const lastMainNode = nodes.find(n => n.type === 'mainNode'); - if (lastMainNode) { + const lastMainNode = nodes.find((n) => n.type === 'mainNode'); + if (lastMainNode?.data) { const newHistoryEntry: ConversationMessage = { + query: lastMainNode.data.label, user: lastMainNode.data.label, - assistant: lastMainNode.data.content + assistant: lastMainNode.data.content, + response: { + response: lastMainNode.data.content, + followUpQuestions: [], + sources: lastMainNode.data.sources || [], + images: lastMainNode.data.images || [], + }, }; - setConversationHistory(prev => [...prev, newHistoryEntry]); + setConversationHistory((prev) => [...prev, newHistoryEntry]); } - setNodes(prevNodes => prevNodes.map(n => { - if (n.id === node.id) { - return { - ...n, - type: 'mainNode', - style: { - ...n.style, - width: nodeWidth, - height: nodeHeight - }, - data: { - ...n.data, - content: 'Loading...', - isExpanded: true - } - }; - } - return n; - })); + setNodes((prevNodes) => + prevNodes.map((n) => { + if (n.id === node.id) { + return { + ...n, + type: 'mainNode', + style: { + ...n.style, + width: nodeWidth, + height: nodeHeight, + }, + data: { + ...n.data, + content: 'Loading...', + isExpanded: true, + }, + }; + } + return n; + }) + ); - const response = await searchRabbitHole({ - query: questionText, - previousConversation: conversationHistory, - concept: currentConcept, - followUpMode: 'expansive' - }, abortController.signal); + const response = await searchRabbitHole( + { + query: questionText, + previousConversation: conversationHistory, + concept: currentConcept, + followUpMode: 'expansive', + parentSearchId: searchResult?.searchId, + }, + abortController.signal + ); + + if (!response) { + throw new Error('Search failed to return a response'); + } if (activeRequestRef.current[node.id] === abortController) { - setNodes(prevNodes => { - const transformedNodes = prevNodes.map(n => { + setNodes((prevNodes) => { + const transformedNodes = prevNodes.map((n) => { if (n.id === node.id) { return { ...n, @@ -349,46 +582,52 @@ const SearchView: React.FC = () => { minHeight: '500px', background: '#1a1a1a', opacity: 1, - cursor: 'default' + cursor: 'default', }, data: { label: response.contextualQuery || questionText, content: response.response, images: response.images?.map((img: ImageData) => img.url), sources: response.sources, - isExpanded: true - } + isExpanded: true, + }, }; } return n; }); - const newFollowUpNodes: Node[] = response.followUpQuestions.map((question: string, index: number) => { - const uniqueId = `question-${node.id}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}-${index}`; - return { - id: uniqueId, - type: 'default', - data: { - label: question, - isExpanded: false, - content: '', - images: [], - sources: [] - }, - position: { x: 0, y: 0 }, - style: { - width: questionNodeWidth, - background: '#1a1a1a', - color: '#fff', - border: '1px solid #333', - borderRadius: '8px', - fontSize: '14px', - textAlign: 'left', - boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', - cursor: 'pointer' - } - }; - }); + const newFollowUpNodes: Node[] = response.followUpQuestions.map( + (question: string, index: number) => { + const uniqueId = `question-${ + node.id + }-${Date.now()}-${Math.random() + .toString(36) + .substr(2, 9)}-${index}`; + return { + id: uniqueId, + type: 'default', + data: { + label: question, + isExpanded: false, + content: '', + images: [], + sources: [], + }, + position: { x: 0, y: 0 }, + style: { + width: questionNodeWidth, + background: '#1a1a1a', + color: '#fff', + border: '1px solid #333', + borderRadius: '8px', + fontSize: '14px', + textAlign: 'left', + boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', + cursor: 'pointer', + }, + }; + } + ); const currentEdges = edges; const newEdges: Edge[] = newFollowUpNodes.map((followUpNode) => ({ @@ -397,46 +636,66 @@ const SearchView: React.FC = () => { target: followUpNode.id, style: { stroke: 'rgba(248, 248, 248, 0.8)', - strokeWidth: 1.5 + strokeWidth: 1.5, }, type: 'smoothstep', animated: true, markerEnd: { type: MarkerType.ArrowClosed, - color: 'rgba(248, 248, 248, 0.8)' - } + color: 'rgba(248, 248, 248, 0.8)', + }, })); - const { nodes: finalLayoutedNodes } = getLayoutedElements( - [...transformedNodes, ...newFollowUpNodes], - [...currentEdges, ...newEdges] - ); + const { nodes: finalLayoutedNodes, edges: layoutedEdges } = + getLayoutedElements( + [...transformedNodes, ...newFollowUpNodes], + [...currentEdges, ...newEdges] + ); + + // Store the updated state + searchRabbitHole({ + query: questionText, + previousConversation: conversationHistory, + concept: currentConcept, + followUpMode: 'expansive', + parentSearchId: response.searchId, + currentNodes: finalLayoutedNodes, + currentEdges: layoutedEdges, + }); setEdges([...currentEdges, ...newEdges]); - return finalLayoutedNodes; }); + + // Refresh recent searches + await loadRecentSearches(); } } catch (error: unknown) { - if (error instanceof Error && error.name !== 'AbortError' && activeRequestRef.current[node.id] === abortController) { + if ( + error instanceof Error && + error.name !== 'AbortError' && + activeRequestRef.current[node.id] === abortController + ) { console.error('Failed to process node click:', error); - setNodes(prevNodes => prevNodes.map(n => { - if (n.id === node.id) { - return { - ...node, - data: { - ...node.data, - isExpanded: false - }, - style: { - ...node.style, - opacity: 1 - } - }; - } - return n; - })); + setNodes((prevNodes) => + prevNodes.map((n) => { + if (n.id === node.id) { + return { + ...node, + data: { + ...node.data, + isExpanded: false, + }, + style: { + ...node.style, + opacity: 1, + }, + }; + } + return n; + }) + ); } } finally { if (activeRequestRef.current[node.id] === abortController) { @@ -446,114 +705,29 @@ const SearchView: React.FC = () => { } }; - const handleSearch = async () => { - if (!query.trim()) return; - - try { - setIsLoading(true); - const loadingNode: Node = { - id: 'main', - type: 'mainNode', - data: { - label: query, - content: 'Loading...', - images: [], - sources: [], - isExpanded: true - }, - position: { x: 0, y: 0 }, - style: { - width: nodeWidth, - height: nodeHeight, - minHeight: nodeHeight, - background: '#1a1a1a', - color: '#fff', - border: '1px solid #333', - borderRadius: '8px', - boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', - cursor: 'default' - } - }; - - setNodes([loadingNode]); - setEdges([]); - - const response = await searchRabbitHole({ - query, - previousConversation: conversationHistory, - concept: currentConcept, - followUpMode: 'expansive' - }); - setSearchResult(response); - - const mainNode: Node = { - ...loadingNode, - data: { - label: response.contextualQuery || query, - content: response.response, - images: response.images?.map((img: ImageData) => img.url), - sources: response.sources, - isExpanded: true - } - }; - const followUpNodes: Node[] = response.followUpQuestions.map((question: string, index: number) => ({ - id: `question-${index}`, - type: 'default', - data: { - label: question, - isExpanded: false, - content: '', - images: [], - sources: [] - }, - position: { x: 0, y: 0 }, - style: { - width: questionNodeWidth, - background: '#1a1a1a', - color: '#fff', - border: '1px solid #333', - borderRadius: '8px', - fontSize: '14px', - textAlign: 'left', - boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', - cursor: 'pointer' - } - })); - - const edges: Edge[] = followUpNodes.map((_, index) => ({ - id: `edge-${index}`, - source: 'main', - target: `question-${index}`, - style: { - stroke: 'rgba(248, 248, 248, 0.8)', - strokeWidth: 1.5 - }, - type: 'smoothstep', - animated: true, - markerEnd: { - type: MarkerType.ArrowClosed, - color: 'rgba(248, 248, 248, 0.8)' - } - })); - - - const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements( - [mainNode, ...followUpNodes], - edges - ); - - setNodes(layoutedNodes); - setEdges(layoutedEdges); - } catch (error) { - console.error('Search failed:', error); - } finally { - setIsLoading(false); - } + const handleHome = () => { + setSearchResult(null); + setNodes([]); + setEdges([]); + setQuery(''); + setConversationHistory([]); + setCurrentConcept(''); + setDeckQuestions({ + thoth: getRandomQuestion('thoth'), + anubis: getRandomQuestion('anubis'), + isis: getRandomQuestion('isis'), + }); }; if (!searchResult) { return ( -
+
+ + {
- + @@ -581,13 +761,13 @@ const SearchView: React.FC = () => {
- +

- Choose a path + Choose a path test

-
{ setQuery(deckQuestions.thoth); @@ -597,12 +777,23 @@ const SearchView: React.FC = () => { >
- - + + + 1
-
Deck of Thoth
+
+ Deck of Thoth +
{deckQuestions.thoth}
@@ -610,7 +801,7 @@ const SearchView: React.FC = () => {
-
{ setQuery(deckQuestions.anubis); @@ -620,15 +811,38 @@ const SearchView: React.FC = () => { >
- - - - - + + + + +
-
Deck of Anubis
+
+ Deck of Anubis +
{deckQuestions.anubis}
@@ -636,7 +850,7 @@ const SearchView: React.FC = () => {
-
{ setQuery(deckQuestions.isis); @@ -646,13 +860,23 @@ const SearchView: React.FC = () => { >
- + - +
-
Deck of Isis
+
+ Deck of Isis +
{deckQuestions.isis}
@@ -660,15 +884,19 @@ const SearchView: React.FC = () => {
- +
) => setQuery(e.target.value)} - onKeyPress={(e: React.KeyboardEvent) => e.key === 'Enter' && handleSearch()} + onChange={(e: React.ChangeEvent) => + setQuery(e.target.value) + } + onKeyPress={(e: React.KeyboardEvent) => + e.key === 'Enter' && handleSearch() + } placeholder="Ask your question..." disabled={isLoading} /> @@ -677,17 +905,27 @@ const SearchView: React.FC = () => {
) : ( - )}
- +
VENTURE INTO THE UNKNOWN
@@ -697,15 +935,34 @@ const SearchView: React.FC = () => { } return ( -
- +
+ + + + + + + +
+
); }; -export default SearchView; \ No newline at end of file +export default SearchView; diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts index 1969dac..6e93cd9 100644 --- a/frontend/src/services/api.ts +++ b/frontend/src/services/api.ts @@ -1,22 +1,50 @@ import axios from 'axios'; +export interface SearchParams { + query: string; + previousConversation?: Array<{ user?: string; assistant?: string }>; + concept?: string; + followUpMode?: 'expansive' | 'focused'; + parentSearchId?: string; + currentNodes?: any[]; + currentEdges?: any[]; +} + const API_BASE_URL = process.env.REACT_APP_API_URL; const api = axios.create({ - baseURL: API_BASE_URL, - headers: { - 'Content-Type': 'application/json', - }, + baseURL: API_BASE_URL, + headers: { + 'Content-Type': 'application/json', + }, }); -export const searchRabbitHole = async (params: { - query: string; - previousConversation?: Array<{ user?: string; assistant?: string }>; - concept?: string; - followUpMode?: "expansive" | "focused"; -}, signal?: AbortSignal) => { - const response = await api.post('/rabbitholes/search', params, { signal }); +export const searchRabbitHole = async ( + params: SearchParams, + signal?: AbortSignal +) => { + const response = await api.post('/rabbitholes/search', params, { signal }); + return response.data; +}; + +export const getRecentSearches = async () => { + try { + const response = await api.get('/rabbitholes/recent-searches'); + return response.data; + } catch (error) { + console.error('Error fetching recent searches:', error); + return []; + } +}; + +export const getSearchById = async (searchId: string) => { + try { + const response = await api.get(`/rabbitholes/search/${searchId}`); return response.data; + } catch (error) { + console.error('Error fetching search by ID:', error); + throw error; + } }; -export default api; \ No newline at end of file +export default api; diff --git a/package-lock.json b/package-lock.json index 312a62e..41bb65e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,9 +27,12 @@ "dependencies": { "@tavily/core": "^0.0.2", "@types/cors": "^2.8.17", + "@types/mongoose": "^5.11.96", "cors": "^2.8.5", "dotenv": "^16.4.1", "express": "^4.18.2", + "mongodb": "^6.13.0", + "mongoose": "^8.10.1", "openai": "^4.26.0" }, "devDependencies": { @@ -3312,6 +3315,15 @@ "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==", "license": "MIT" }, + "node_modules/@mongodb-js/saslprep": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@mongodb-js/saslprep/-/saslprep-1.2.0.tgz", + "integrity": "sha512-+ywrb0AqkfaYuhHs6LxKWgqbh3I72EpEgESCw37o+9qPx9WTCkgDm2B+eMrwehGtHBWHFU4GXvnSCNiFhhausg==", + "license": "MIT", + "dependencies": { + "sparse-bitfield": "^3.0.3" + } + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -4666,6 +4678,15 @@ "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==", "license": "MIT" }, + "node_modules/@types/mongoose": { + "version": "5.11.96", + "resolved": "https://registry.npmjs.org/@types/mongoose/-/mongoose-5.11.96.tgz", + "integrity": "sha512-keiY22ljJtXyM7osgScmZOHV6eL5VFUD5tQumlu+hjS++HND5nM8jNEdj5CSWfKIJpVwQfPuwQ2SfBqUnCAVRw==", + "license": "MIT", + "dependencies": { + "mongoose": "*" + } + }, "node_modules/@types/ms": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz", @@ -4833,6 +4854,21 @@ "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", "license": "MIT" }, + "node_modules/@types/webidl-conversions": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.3.tgz", + "integrity": "sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA==", + "license": "MIT" + }, + "node_modules/@types/whatwg-url": { + "version": "11.0.5", + "resolved": "https://registry.npmjs.org/@types/whatwg-url/-/whatwg-url-11.0.5.tgz", + "integrity": "sha512-coYR071JRaHa+xoEvvYqvnIHaVqaYrLPbsufM9BF63HkwI5Lgmy2QR8Q5K/lYDYo5AK82wOvSOS0UsLTpTG7uQ==", + "license": "MIT", + "dependencies": { + "@types/webidl-conversions": "*" + } + }, "node_modules/@types/ws": { "version": "8.5.14", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.14.tgz", @@ -6419,6 +6455,15 @@ "node-int64": "^0.4.0" } }, + "node_modules/bson": { + "version": "6.10.3", + "resolved": "https://registry.npmjs.org/bson/-/bson-6.10.3.tgz", + "integrity": "sha512-MTxGsqgYTwfshYWTRdmZRC+M7FnG1b4y7RO7p2k3X24Wq0yv1m77Wsj0BzlPzd/IowgESfsruQCUToa7vbOpPQ==", + "license": "Apache-2.0", + "engines": { + "node": ">=16.20.1" + } + }, "node_modules/buffer-from": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", @@ -12728,6 +12773,15 @@ "node": ">=4.0" } }, + "node_modules/kareem": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/kareem/-/kareem-2.6.3.tgz", + "integrity": "sha512-C3iHfuGUXK2u8/ipq9LfjFfXFxAZMQJJq7vLS45r3D9Y2xQ/m4S8zaR4zMLFWh9AsNPXmcFfUDhTEO8UIC/V6Q==", + "license": "Apache-2.0", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", @@ -13192,6 +13246,12 @@ "node": ">= 4.0.0" } }, + "node_modules/memory-pager": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.5.0.tgz", + "integrity": "sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==", + "license": "MIT" + }, "node_modules/merge-descriptors": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz", @@ -13801,6 +13861,168 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/mongodb": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-6.13.0.tgz", + "integrity": "sha512-KeESYR5TEaFxOuwRqkOm3XOsMqCSkdeDMjaW5u2nuKfX7rqaofp7JQGoi7sVqQcNJTKuveNbzZtWMstb8ABP6Q==", + "license": "Apache-2.0", + "dependencies": { + "@mongodb-js/saslprep": "^1.1.9", + "bson": "^6.10.1", + "mongodb-connection-string-url": "^3.0.0" + }, + "engines": { + "node": ">=16.20.1" + }, + "peerDependencies": { + "@aws-sdk/credential-providers": "^3.188.0", + "@mongodb-js/zstd": "^1.1.0 || ^2.0.0", + "gcp-metadata": "^5.2.0", + "kerberos": "^2.0.1", + "mongodb-client-encryption": ">=6.0.0 <7", + "snappy": "^7.2.2", + "socks": "^2.7.1" + }, + "peerDependenciesMeta": { + "@aws-sdk/credential-providers": { + "optional": true + }, + "@mongodb-js/zstd": { + "optional": true + }, + "gcp-metadata": { + "optional": true + }, + "kerberos": { + "optional": true + }, + "mongodb-client-encryption": { + "optional": true + }, + "snappy": { + "optional": true + }, + "socks": { + "optional": true + } + } + }, + "node_modules/mongodb-connection-string-url": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/mongodb-connection-string-url/-/mongodb-connection-string-url-3.0.2.tgz", + "integrity": "sha512-rMO7CGo/9BFwyZABcKAWL8UJwH/Kc2x0g72uhDWzG48URRax5TCIcJ7Rc3RZqffZzO/Gwff/jyKwCU9TN8gehA==", + "license": "Apache-2.0", + "dependencies": { + "@types/whatwg-url": "^11.0.2", + "whatwg-url": "^14.1.0 || ^13.0.0" + } + }, + "node_modules/mongodb-connection-string-url/node_modules/tr46": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz", + "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==", + "license": "MIT", + "dependencies": { + "punycode": "^2.3.1" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/mongodb-connection-string-url/node_modules/webidl-conversions": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", + "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=12" + } + }, + "node_modules/mongodb-connection-string-url/node_modules/whatwg-url": { + "version": "14.1.1", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.1.1.tgz", + "integrity": "sha512-mDGf9diDad/giZ/Sm9Xi2YcyzaFpbdLpJPr+E9fSkyQ7KpQD4SdFcugkRQYzhmfI4KeV4Qpnn2sKPdo+kmsgRQ==", + "license": "MIT", + "dependencies": { + "tr46": "^5.0.0", + "webidl-conversions": "^7.0.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/mongoose": { + "version": "8.10.1", + "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.10.1.tgz", + "integrity": "sha512-5beTeBZnJNndRXU9rxPol0JmTWZMAtgkPbooROkGilswvrZALDERY4cJrGZmgGwDS9dl0mxiB7si+Mv9Yms2fg==", + "license": "MIT", + "dependencies": { + "bson": "^6.10.1", + "kareem": "2.6.3", + "mongodb": "~6.13.0", + "mpath": "0.9.0", + "mquery": "5.0.0", + "ms": "2.1.3", + "sift": "17.1.3" + }, + "engines": { + "node": ">=16.20.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mongoose" + } + }, + "node_modules/mongoose/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "license": "MIT" + }, + "node_modules/mpath": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/mpath/-/mpath-0.9.0.tgz", + "integrity": "sha512-ikJRQTk8hw5DEoFVxHG1Gn9T/xcjtdnOKIU1JTmGjZZlg9LST2mBLmcX3/ICIbgJydT2GOc15RnNy5mHmzfSew==", + "license": "MIT", + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/mquery": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/mquery/-/mquery-5.0.0.tgz", + "integrity": "sha512-iQMncpmEK8R8ncT8HJGsGc9Dsp8xcgYMVSbs5jgnm1lFHTZqMJTUWTDx1LBO8+mK3tPNZWFLBghQEIOULSTHZg==", + "license": "MIT", + "dependencies": { + "debug": "4.x" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/mquery/node_modules/debug": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", + "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/mquery/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -17480,6 +17702,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/sift": { + "version": "17.1.3", + "resolved": "https://registry.npmjs.org/sift/-/sift-17.1.3.tgz", + "integrity": "sha512-Rtlj66/b0ICeFzYTuNvX/EF1igRbbnGSvEyT79McoZa/DeGhMyC5pWKOEsZKnpkqtSeovd5FL/bjHWC3CIIvCQ==", + "license": "MIT" + }, "node_modules/signal-exit": { "version": "3.0.7", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", @@ -17609,6 +17837,15 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/sparse-bitfield": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz", + "integrity": "sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ==", + "license": "MIT", + "dependencies": { + "memory-pager": "^1.0.2" + } + }, "node_modules/spawn-command": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz",