338 lines
12 KiB
TypeScript
338 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { useLanguage } from '@/lib/i18n/LanguageProvider'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Lightbulb, ThumbsUp, ThumbsDown, X, Sparkles, ArrowRight } from 'lucide-react'
|
|
import { toast } from 'sonner'
|
|
|
|
interface MemoryEchoInsight {
|
|
id: string
|
|
note1Id: string
|
|
note2Id: string
|
|
note1: {
|
|
id: string
|
|
title: string | null
|
|
content: string
|
|
}
|
|
note2: {
|
|
id: string
|
|
title: string | null
|
|
content: string
|
|
}
|
|
similarityScore: number
|
|
insight: string
|
|
insightDate: Date
|
|
viewed: boolean
|
|
feedback: string | null
|
|
}
|
|
|
|
interface MemoryEchoNotificationProps {
|
|
onOpenNote?: (noteId: string) => void
|
|
}
|
|
|
|
export function MemoryEchoNotification({ onOpenNote }: MemoryEchoNotificationProps) {
|
|
const { t } = useLanguage()
|
|
const [insight, setInsight] = useState<MemoryEchoInsight | null>(null)
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const [isDismissed, setIsDismissed] = useState(false)
|
|
const [showModal, setShowModal] = useState(false)
|
|
|
|
// Fetch insight on mount
|
|
useEffect(() => {
|
|
fetchInsight()
|
|
}, [])
|
|
|
|
const fetchInsight = async () => {
|
|
setIsLoading(true)
|
|
try {
|
|
const res = await fetch('/api/ai/echo')
|
|
const data = await res.json()
|
|
|
|
if (data.insight) {
|
|
setInsight(data.insight)
|
|
}
|
|
} catch (error) {
|
|
console.error('[MemoryEcho] Failed to fetch insight:', error)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleView = async () => {
|
|
if (!insight) return
|
|
|
|
try {
|
|
// Mark as viewed
|
|
await fetch('/api/ai/echo', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
action: 'view',
|
|
insightId: insight.id
|
|
})
|
|
})
|
|
|
|
// Show success message and open modal
|
|
toast.success('Opening connection...')
|
|
setShowModal(true)
|
|
} catch (error) {
|
|
console.error('[MemoryEcho] Failed to view connection:', error)
|
|
toast.error('Failed to open connection')
|
|
}
|
|
}
|
|
|
|
const handleFeedback = async (feedback: 'thumbs_up' | 'thumbs_down') => {
|
|
if (!insight) return
|
|
|
|
try {
|
|
await fetch('/api/ai/echo', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
action: 'feedback',
|
|
insightId: insight.id,
|
|
feedback
|
|
})
|
|
})
|
|
|
|
// Show feedback toast
|
|
if (feedback === 'thumbs_up') {
|
|
toast.success('Thanks for your feedback!')
|
|
} else {
|
|
toast.success('Thanks! We\'ll use this to improve.')
|
|
}
|
|
|
|
// Dismiss notification
|
|
setIsDismissed(true)
|
|
} catch (error) {
|
|
console.error('[MemoryEcho] Failed to submit feedback:', error)
|
|
toast.error('Failed to submit feedback')
|
|
}
|
|
}
|
|
|
|
const handleDismiss = () => {
|
|
setIsDismissed(true)
|
|
}
|
|
|
|
// Don't render notification if dismissed, loading, or no insight
|
|
if (isDismissed || isLoading || !insight) {
|
|
return null
|
|
}
|
|
|
|
// Calculate values for both notification and modal
|
|
const note1Title = insight.note1.title || 'Untitled'
|
|
const note2Title = insight.note2.title || 'Untitled'
|
|
const similarityPercentage = Math.round(insight.similarityScore * 100)
|
|
|
|
// Render modal if requested
|
|
if (showModal && insight) {
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
|
|
<div className="bg-white dark:bg-zinc-900 rounded-lg shadow-xl max-w-5xl w-full max-h-[90vh] overflow-hidden">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-6 border-b dark:border-zinc-700">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-amber-100 dark:bg-amber-900/30 rounded-full">
|
|
<Sparkles className="h-5 w-5 text-amber-600 dark:text-amber-400" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-semibold">{t('memoryEcho.title')}</h2>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
{t('connection.similarityInfo', { similarity: similarityPercentage })}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
setShowModal(false)
|
|
setIsDismissed(true)
|
|
}}
|
|
className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
|
|
>
|
|
<X className="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* AI-generated insight */}
|
|
<div className="px-6 py-4 bg-amber-50 dark:bg-amber-950/20 border-b dark:border-zinc-700">
|
|
<p className="text-sm text-gray-700 dark:text-gray-300">
|
|
{insight.insight}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Notes Grid */}
|
|
<div className="grid grid-cols-2 gap-6 p-6">
|
|
{/* Note 1 */}
|
|
<div
|
|
onClick={() => {
|
|
if (onOpenNote) {
|
|
onOpenNote(insight.note1.id)
|
|
setShowModal(false)
|
|
}
|
|
}}
|
|
className="cursor-pointer border dark:border-zinc-700 rounded-lg p-4 hover:border-amber-300 dark:hover:border-amber-700 transition-colors"
|
|
>
|
|
<h3 className="font-semibold text-primary dark:text-primary-foreground mb-2">
|
|
{note1Title}
|
|
</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-4">
|
|
{insight.note1.content}
|
|
</p>
|
|
<p className="text-xs text-gray-500 mt-2">{t('memoryEcho.clickToView')}</p>
|
|
</div>
|
|
|
|
{/* Note 2 */}
|
|
<div
|
|
onClick={() => {
|
|
if (onOpenNote) {
|
|
onOpenNote(insight.note2.id)
|
|
setShowModal(false)
|
|
}
|
|
}}
|
|
className="cursor-pointer border dark:border-zinc-700 rounded-lg p-4 hover:border-purple-300 dark:hover:border-purple-700 transition-colors"
|
|
>
|
|
<h3 className="font-semibold text-purple-600 dark:text-purple-400 mb-2">
|
|
{note2Title}
|
|
</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-4">
|
|
{insight.note2.content}
|
|
</p>
|
|
<p className="text-xs text-gray-500 mt-2">{t('memoryEcho.clickToView')}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Feedback Section */}
|
|
<div className="flex items-center justify-between px-6 py-4 border-t dark:border-zinc-700 bg-gray-50 dark:bg-zinc-800/50">
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
{t('connection.isHelpful')}
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => handleFeedback('thumbs_up')}
|
|
className={`px-4 py-2 rounded-lg flex items-center gap-2 transition-colors ${insight.feedback === 'thumbs_up'
|
|
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
|
: 'hover:bg-green-50 text-green-600 dark:hover:bg-green-950/20'
|
|
}`}
|
|
>
|
|
<ThumbsUp className="h-4 w-4" />
|
|
{t('memoryEcho.helpful')}
|
|
</button>
|
|
<button
|
|
onClick={() => handleFeedback('thumbs_down')}
|
|
className={`px-4 py-2 rounded-lg flex items-center gap-2 transition-colors ${insight.feedback === 'thumbs_down'
|
|
? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
|
|
: 'hover:bg-red-50 text-red-600 dark:hover:bg-red-950/20'
|
|
}`}
|
|
>
|
|
<ThumbsDown className="h-4 w-4" />
|
|
{t('memoryEcho.notHelpful')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="fixed bottom-4 right-4 z-50 max-w-md w-full animate-in slide-in-from-bottom-4 fade-in duration-500">
|
|
<Card className="border-amber-200 dark:border-amber-900 shadow-lg bg-gradient-to-br from-amber-50 to-white dark:from-amber-950/20 dark:to-background">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className="p-2 bg-amber-100 dark:bg-amber-900/30 rounded-full">
|
|
<Lightbulb className="h-5 w-5 text-amber-600 dark:text-amber-400" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
{t('memoryEcho.title')}
|
|
<Sparkles className="h-4 w-4 text-amber-500" />
|
|
</CardTitle>
|
|
<CardDescription className="text-xs mt-1">
|
|
{t('memoryEcho.description')}
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 -mr-2 -mt-2"
|
|
onClick={handleDismiss}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-3">
|
|
{/* AI-generated insight */}
|
|
<div className="bg-white dark:bg-zinc-900 rounded-lg p-3 border border-amber-100 dark:border-amber-900/30">
|
|
<p className="text-sm text-gray-700 dark:text-gray-300">
|
|
{insight.insight}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Connected notes */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<Badge variant="outline" className="border-primary/20 text-primary dark:border-primary/30 dark:text-primary-foreground">
|
|
{note1Title}
|
|
</Badge>
|
|
<ArrowRight className="h-3 w-3 text-gray-400" />
|
|
<Badge variant="outline" className="border-purple-200 text-purple-700 dark:border-purple-900 dark:text-purple-300">
|
|
{note2Title}
|
|
</Badge>
|
|
<Badge variant="secondary" className="ml-auto text-xs">
|
|
{similarityPercentage}% match
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action buttons */}
|
|
<div className="flex items-center gap-2 pt-2">
|
|
<Button
|
|
size="sm"
|
|
className="flex-1 bg-amber-600 hover:bg-amber-700 text-white"
|
|
onClick={handleView}
|
|
>
|
|
{t('memoryEcho.viewConnection')}
|
|
</Button>
|
|
|
|
<div className="flex items-center gap-1 border-l pl-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 text-green-600 hover:text-green-700 hover:bg-green-50 dark:hover:bg-green-950/20"
|
|
onClick={() => handleFeedback('thumbs_up')}
|
|
title={t('memoryEcho.helpful')}
|
|
>
|
|
<ThumbsUp className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/20"
|
|
onClick={() => handleFeedback('thumbs_down')}
|
|
title={t('memoryEcho.notHelpful')}
|
|
>
|
|
<ThumbsDown className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dismiss link */}
|
|
<button
|
|
className="w-full text-center text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 py-1"
|
|
onClick={handleDismiss}
|
|
>
|
|
{t('memoryEcho.dismiss')}
|
|
</button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|