mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-09-11 22:51:05 +00:00
few more improvements
This commit is contained in:
Mahesh Sanikommmu
parent
4e8d934f93
commit
3ae6eb48e3
15 changed files with 3172 additions and 199 deletions
|
|
@ -192,9 +192,7 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
|
|||
)}
|
||||
>
|
||||
<div className="absolute left-0.5 top-1/2 -translate-x-full -translate-y-1/2 w-0 h-0 border-t-[6px] border-b-[6px] border-r-8 border-t-transparent border-b-transparent border-[#290F0A]" />
|
||||
<p className="text-xs whitespace-nowrap">
|
||||
{errors.linkedin}
|
||||
</p>
|
||||
<p className="text-xs whitespace-nowrap">{errors.linkedin}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -126,13 +126,30 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
|
|||
style={{ height: activeStep === 3 ? "calc(100% - 4rem)" : "100%" }}
|
||||
/>
|
||||
<div className="flex items-start space-x-4 z-20">
|
||||
<div
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium shrink-0 z-20 text-white",
|
||||
selectedClient && "cursor-pointer hover:bg-[#1a2530]",
|
||||
!selectedClient && "cursor-default",
|
||||
activeStep === 1
|
||||
? "border border-[#15233C] bg-[#08142D]"
|
||||
: "bg-[#161F2B] ",
|
||||
)}
|
||||
onClick={() => {
|
||||
if (selectedClient) {
|
||||
setSelectedClient(null)
|
||||
setActiveStep(1)
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (selectedClient && (e.key === "Enter" || e.key === " ")) {
|
||||
e.preventDefault()
|
||||
setSelectedClient(null)
|
||||
setActiveStep(1)
|
||||
}
|
||||
}}
|
||||
disabled={!selectedClient}
|
||||
>
|
||||
<span
|
||||
style={
|
||||
|
|
@ -149,11 +166,33 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
|
|||
>
|
||||
1
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div className="flex-1 mb-4">
|
||||
<div className="flex gap-4 mb-4">
|
||||
<h3
|
||||
className="text-white text-lg font-medium text-center"
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"text-white text-lg font-medium text-center",
|
||||
selectedClient && "cursor-pointer hover:opacity-80",
|
||||
!selectedClient && "cursor-default",
|
||||
)}
|
||||
onClick={() => {
|
||||
if (selectedClient) {
|
||||
setSelectedClient(null)
|
||||
setActiveStep(1)
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (
|
||||
selectedClient &&
|
||||
(e.key === "Enter" || e.key === " ")
|
||||
) {
|
||||
e.preventDefault()
|
||||
setSelectedClient(null)
|
||||
setActiveStep(1)
|
||||
}
|
||||
}}
|
||||
disabled={!selectedClient}
|
||||
style={
|
||||
activeStep === 1
|
||||
? {
|
||||
|
|
@ -167,7 +206,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
|
|||
}
|
||||
>
|
||||
Select your AI client
|
||||
</h3>
|
||||
</button>
|
||||
{selectedClient && (
|
||||
<Select
|
||||
onValueChange={(value) => {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { getDocumentIcon } from "@/lib/document-icon"
|
||||
import { getDocumentIcon } from "@/components/new/document-modal/document-icon"
|
||||
import {
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ import { useDeleteDocument } from "@lib/queries"
|
|||
import { useProject } from "@/stores"
|
||||
|
||||
import { MemoryDetail } from "./memories-utils/memory-detail"
|
||||
import { getDocumentIcon } from "@/lib/document-icon"
|
||||
import { getDocumentIcon } from "@/components/new/document-modal/document-icon"
|
||||
import { formatDate, getSourceUrl } from "./memories-utils"
|
||||
|
||||
type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
|
||||
|
|
|
|||
83
apps/web/components/new/document-modal/content/pdf.tsx
Normal file
83
apps/web/components/new/document-modal/content/pdf.tsx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
"use client"
|
||||
|
||||
import { Document, Page, pdfjs } from "react-pdf"
|
||||
import { useState } from "react"
|
||||
import "react-pdf/dist/Page/AnnotationLayer.css"
|
||||
import "react-pdf/dist/Page/TextLayer.css"
|
||||
|
||||
// Configure PDF.js worker to use local package
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
|
||||
"pdfjs-dist/build/pdf.worker.min.mjs",
|
||||
import.meta.url,
|
||||
).toString()
|
||||
|
||||
interface PdfViewerProps {
|
||||
url: string | null | undefined
|
||||
}
|
||||
|
||||
export function PdfViewer({ url }: PdfViewerProps) {
|
||||
const [numPages, setNumPages] = useState<number | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
if (!url) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full text-gray-400">
|
||||
No PDF URL provided
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
|
||||
setNumPages(numPages)
|
||||
setLoading(false)
|
||||
setError(null)
|
||||
}
|
||||
|
||||
function onDocumentLoadError(error: Error) {
|
||||
setError(error.message || "Failed to load PDF")
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full w-full overflow-hidden scrollbar-thin">
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center h-full text-gray-400">
|
||||
Loading PDF...
|
||||
</div>
|
||||
)}
|
||||
{error && (
|
||||
<div className="flex items-center justify-center h-full text-red-400">
|
||||
Error: {error}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 overflow-auto w-full">
|
||||
<Document
|
||||
file={
|
||||
url || "https://corsproxy.io/?" +
|
||||
encodeURIComponent("http://www.pdf995.com/samples/pdf.pdf")
|
||||
}
|
||||
onLoadSuccess={onDocumentLoadSuccess}
|
||||
onLoadError={onDocumentLoadError}
|
||||
loading={null}
|
||||
className="w-full"
|
||||
>
|
||||
{numPages && (
|
||||
<div className="flex flex-col items-center gap-4 py-4 w-full">
|
||||
{Array.from(new Array(numPages), (_, index) => (
|
||||
<Page
|
||||
key={`page_${index + 1}`}
|
||||
pageNumber={index + 1}
|
||||
renderTextLayer
|
||||
renderAnnotationLayer
|
||||
className="shadow-lg"
|
||||
width={630}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Document>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
234
apps/web/components/new/document-modal/document-icon.tsx
Normal file
234
apps/web/components/new/document-modal/document-icon.tsx
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
import { MCPIcon } from "@/components/menu"
|
||||
import { colors } from "@repo/ui/memory-graph/constants"
|
||||
import {
|
||||
GoogleDocs,
|
||||
MicrosoftWord,
|
||||
NotionDoc,
|
||||
GoogleDrive,
|
||||
GoogleSheets,
|
||||
GoogleSlides,
|
||||
OneDrive,
|
||||
MicrosoftOneNote,
|
||||
MicrosoftPowerpoint,
|
||||
MicrosoftExcel,
|
||||
} from "@ui/assets/icons"
|
||||
import { Globe } from "lucide-react"
|
||||
import { useState } from "react"
|
||||
|
||||
const getFaviconUrl = (url: string): string => {
|
||||
try {
|
||||
const domain = new URL(url).hostname
|
||||
return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`
|
||||
} catch {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
|
||||
const FaviconIcon = ({
|
||||
url,
|
||||
className,
|
||||
iconProps,
|
||||
}: {
|
||||
url: string
|
||||
className: string
|
||||
iconProps: { className: string; style: { color: string } }
|
||||
}) => {
|
||||
const [hasError, setHasError] = useState(false)
|
||||
const faviconUrl = getFaviconUrl(url)
|
||||
|
||||
if (hasError || !faviconUrl) {
|
||||
return <Globe {...iconProps} />
|
||||
}
|
||||
|
||||
return (
|
||||
<img
|
||||
src={faviconUrl}
|
||||
alt="Website favicon"
|
||||
className={className}
|
||||
style={{
|
||||
width: "2em",
|
||||
height: "2em",
|
||||
objectFit: "contain",
|
||||
}}
|
||||
onError={() => setHasError(true)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const PDFIcon = ({ className }: { className: string }) => {
|
||||
return (
|
||||
<svg
|
||||
width="8"
|
||||
height="10"
|
||||
viewBox="0 0 8 10"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
>
|
||||
<title>PDF Icon</title>
|
||||
<g filter="url(#filter0_i_719_6586)">
|
||||
<path
|
||||
d="M1 10C0.725 10 0.489583 9.90208 0.29375 9.70625C0.0979167 9.51042 0 9.275 0 9V1C0 0.725 0.0979167 0.489583 0.29375 0.29375C0.489583 0.0979167 0.725 0 1 0H5L8 3V9C8 9.275 7.90208 9.51042 7.70625 9.70625C7.51042 9.90208 7.275 10 7 10H1ZM4.5 3.5V1H1V9H7V3.5H4.5Z"
|
||||
fill="#FF7673"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_i_719_6586"
|
||||
x="0"
|
||||
y="0"
|
||||
width="8.25216"
|
||||
height="10.2522"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB"
|
||||
>
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="BackgroundImageFix"
|
||||
result="shape"
|
||||
/>
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset dx="0.252163" dy="0.252163" />
|
||||
<feGaussianBlur stdDeviation="0.504325" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0.0431373 0 0 0 0 0.0588235 0 0 0 0 0.0823529 0 0 0 0.4 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="shape"
|
||||
result="effect1_innerShadow_719_6586"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
const TextDocumentIcon = ({ className }: { className: string }) => {
|
||||
return (
|
||||
<svg
|
||||
width="18"
|
||||
height="14"
|
||||
viewBox="0 0 18 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
>
|
||||
<title>Text Document Icon</title>
|
||||
<g filter="url(#filter0_i_724_34196)">
|
||||
<path
|
||||
d="M3.33333 8.33333H9.16667L10.8333 6.66667H3.33333V8.33333ZM3.33333 5H8.33333V3.33333H3.33333V5ZM1.66667 1.66667V10H7.5L5.83333 11.6667H0V0H16.6667V2.5H15V1.66667H1.66667ZM17.4167 6.08333C17.4861 6.15278 17.5208 6.22917 17.5208 6.3125C17.5208 6.39583 17.4861 6.47222 17.4167 6.54167L16.6667 7.29167L15.2083 5.83333L15.9583 5.08333C16.0278 5.01389 16.1042 4.97917 16.1875 4.97917C16.2708 4.97917 16.3472 5.01389 16.4167 5.08333L17.4167 6.08333ZM9.16667 13.3333V11.875L14.7083 6.33333L16.1667 7.79167L10.625 13.3333H9.16667Z"
|
||||
fill="#FAFAFA"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_i_724_34196"
|
||||
x="0"
|
||||
y="0"
|
||||
width="18.0253"
|
||||
height="13.8376"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB"
|
||||
>
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="BackgroundImageFix"
|
||||
result="shape"
|
||||
/>
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset dx="0.504325" dy="0.504325" />
|
||||
<feGaussianBlur stdDeviation="1.00865" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0.0431373 0 0 0 0 0.0588235 0 0 0 0 0.0823529 0 0 0 0.4 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="shape"
|
||||
result="effect1_innerShadow_724_34196"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const getDocumentIcon = (
|
||||
type: string,
|
||||
className: string,
|
||||
source?: string,
|
||||
url?: string,
|
||||
) => {
|
||||
const iconProps = {
|
||||
className,
|
||||
style: { color: colors.text.muted },
|
||||
}
|
||||
|
||||
if (source === "mcp") {
|
||||
return <MCPIcon {...iconProps} />
|
||||
}
|
||||
|
||||
if (
|
||||
type === "webpage" ||
|
||||
type === "url" ||
|
||||
(url && (type === "unknown" || !type))
|
||||
) {
|
||||
if (url) {
|
||||
return (
|
||||
<FaviconIcon url={url} className={className} iconProps={iconProps} />
|
||||
)
|
||||
}
|
||||
|
||||
return <Globe {...iconProps} />
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case "google_doc":
|
||||
return <GoogleDocs {...iconProps} />
|
||||
case "google_sheet":
|
||||
return <GoogleSheets {...iconProps} />
|
||||
case "google_slide":
|
||||
return <GoogleSlides {...iconProps} />
|
||||
case "google_drive":
|
||||
return <GoogleDrive {...iconProps} />
|
||||
case "notion":
|
||||
case "notion_doc":
|
||||
return <NotionDoc {...iconProps} />
|
||||
case "word":
|
||||
case "microsoft_word":
|
||||
return <MicrosoftWord {...iconProps} />
|
||||
case "excel":
|
||||
case "microsoft_excel":
|
||||
return <MicrosoftExcel {...iconProps} />
|
||||
case "powerpoint":
|
||||
case "microsoft_powerpoint":
|
||||
return <MicrosoftPowerpoint {...iconProps} />
|
||||
case "onenote":
|
||||
case "microsoft_onenote":
|
||||
return <MicrosoftOneNote {...iconProps} />
|
||||
case "onedrive":
|
||||
return <OneDrive {...iconProps} />
|
||||
case "pdf":
|
||||
return <PDFIcon className={className} />
|
||||
default:
|
||||
return <TextDocumentIcon className={className} />
|
||||
}
|
||||
}
|
||||
317
apps/web/components/new/document-modal/graph-list-memories.tsx
Normal file
317
apps/web/components/new/document-modal/graph-list-memories.tsx
Normal file
|
|
@ -0,0 +1,317 @@
|
|||
import { cn } from "@lib/utils"
|
||||
import { Tabs, TabsList, TabsTrigger } from "@ui/components/tabs"
|
||||
|
||||
export interface MemoryEntry {
|
||||
id: string
|
||||
memory: string
|
||||
title?: string
|
||||
url?: string
|
||||
version: number
|
||||
isForgotten: boolean
|
||||
forgetAfter: string | null
|
||||
isLatest: boolean
|
||||
isStatic: boolean
|
||||
}
|
||||
|
||||
function VersionStatus({
|
||||
status,
|
||||
}: {
|
||||
status: "latest" | "static" | "expiring" | "forgotten"
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
{
|
||||
{
|
||||
latest: (
|
||||
<div className="text-[#05A376] text-[10px] font-medium flex items-center gap-1">
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 10 10"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Latest</title>
|
||||
<g opacity="0.6">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M5.00069 0L9.33082 2.5V7.5L5.00069 10L0.670563 7.5V2.5L5.00069 0ZM7.5008 2.5H5.0008H2.50069L2.5008 7.5H7.5008V5V2.5Z"
|
||||
fill="#00FFA9"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M5.0008 2.5H2.50069L2.5008 7.5H7.5008V5C6.12009 5 5.0008 3.88071 5.0008 2.5Z"
|
||||
fill="#005236"
|
||||
/>
|
||||
<path
|
||||
d="M7.5008 2.5H5.0008C5.0008 3.88071 6.12009 5 7.5008 5V2.5Z"
|
||||
fill="#00FFA9"
|
||||
/>
|
||||
<path
|
||||
d="M9.08072 2.64453V7.35449L5.00064 9.71094L0.920563 7.35449V2.64453L5.00064 0.288086L9.08072 2.64453ZM2.25064 2.25V7.75H7.75064V2.25H2.25064ZM4.76334 2.75C4.88226 4.0691 5.93157 5.11728 7.25064 5.23633V7.25H2.75064V2.75H4.76334ZM7.25064 2.75V4.73438C6.20794 4.61894 5.3806 3.79274 5.26529 2.75H7.25064Z"
|
||||
stroke="#00FFA9"
|
||||
stroke-width="0.5"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
Latest
|
||||
</div>
|
||||
),
|
||||
static: (
|
||||
<div className="text-[#369BFD] text-[10px] font-medium flex items-center gap-1">
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 10 10"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Static</title>
|
||||
<circle cx="5.00061" cy="5.00073" r="1.25" fill="#369BFD" />
|
||||
<circle
|
||||
cx="5.00061"
|
||||
cy="5.00073"
|
||||
r="0.833333"
|
||||
stroke="#369BFD"
|
||||
stroke-opacity="0.5"
|
||||
stroke-width="0.833333"
|
||||
/>
|
||||
<circle
|
||||
cx="5.00057"
|
||||
cy="5.00081"
|
||||
r="2.91667"
|
||||
stroke="#369BFD"
|
||||
stroke-opacity="0.5"
|
||||
stroke-width="0.833333"
|
||||
/>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="5"
|
||||
r="4.58333"
|
||||
stroke="#369BFD"
|
||||
stroke-opacity="0.2"
|
||||
stroke-width="0.833333"
|
||||
/>
|
||||
</svg>
|
||||
Static
|
||||
</div>
|
||||
),
|
||||
expiring: (
|
||||
<div className="text-[#9D6510] text-[10px] font-medium">
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 10 10"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Expiring</title>
|
||||
<g opacity="0.6">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M2.50066 2.5H7.50077V7.5H2.50077L2.50066 2.5Z"
|
||||
fill="#4D2E00"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M5.00066 0L9.33078 2.5V7.5L5.00066 10L0.670532 7.5V2.5L5.00066 0ZM7.50077 2.5H2.50066L2.50077 7.5H7.50077V2.5Z"
|
||||
fill="#FE9900"
|
||||
/>
|
||||
<path
|
||||
d="M9.08069 2.64453V7.35449L5.00061 9.71094L0.920532 7.35449V2.64453L5.00061 0.288086L9.08069 2.64453ZM2.25061 2.25V7.75H7.75061V2.25H2.25061ZM7.25061 2.75V7.25H2.75061V2.75H7.25061Z"
|
||||
stroke="#FE9900"
|
||||
stroke-width="0.5"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
Expiring
|
||||
</div>
|
||||
),
|
||||
forgotten: (
|
||||
<div className="text-[#9C4044] text-[10px] font-medium">
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 10 10"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Forgotten</title>
|
||||
<path
|
||||
opacity="0.6"
|
||||
d="M9.08008 2.64453V7.35449L5 9.71094L0.919922 7.35449V2.64453L5 0.288086L9.08008 2.64453Z"
|
||||
fill="#60272C"
|
||||
stroke="#FF6467"
|
||||
stroke-width="0.5"
|
||||
/>
|
||||
<path
|
||||
d="M2.08333 2.08341L7.91677 7.91685M7.91667 2.08341L2.08333 7.91675"
|
||||
stroke="#9C4044"
|
||||
stroke-width="0.5"
|
||||
/>
|
||||
</svg>
|
||||
Forgotten
|
||||
</div>
|
||||
),
|
||||
}[status]
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export function GraphListMemories({
|
||||
memoryEntries,
|
||||
}: {
|
||||
memoryEntries: MemoryEntry[]
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
id="document-memories"
|
||||
className="relative flex-1 px-3 pt-3 rounded-[14px] flex flex-col overflow-hidden shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_1px_2px_rgba(0,0,0,0.1)]"
|
||||
style={{
|
||||
backgroundImage: "url('/dot-pattern.svg')",
|
||||
backgroundRepeat: "repeat",
|
||||
backgroundSize: "369px 371px",
|
||||
}}
|
||||
>
|
||||
<Tabs defaultValue="list">
|
||||
<TabsList className="rounded-full border border-[#161F2C] h-11! z-10!">
|
||||
<TabsTrigger
|
||||
value="graph"
|
||||
className={cn(
|
||||
"rounded-full data-[state=active]:bg-[#00173C]! dark:data-[state=active]:border-[#2261CA33]! px-4 py-4",
|
||||
)}
|
||||
>
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Graph</title>
|
||||
<mask
|
||||
id="mask0_891_45456"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="0"
|
||||
y="0"
|
||||
width="14"
|
||||
height="14"
|
||||
>
|
||||
<rect width="14" height="14" fill="#D9D9D9" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_891_45456)">
|
||||
<path
|
||||
d="M7.00057 12.8334C6.51446 12.8334 6.10126 12.6632 5.76099 12.3229C5.42071 11.9827 5.25057 11.5695 5.25057 11.0834C5.25057 11.0347 5.253 10.9813 5.25786 10.9229C5.26272 10.8646 5.27001 10.8111 5.27974 10.7625L4.06932 10.0771C3.91376 10.2132 3.73876 10.3177 3.54432 10.3906C3.34988 10.4636 3.14085 10.5 2.91724 10.5C2.43113 10.5 2.01793 10.3299 1.67765 9.9896C1.33738 9.64933 1.16724 9.23613 1.16724 8.75002C1.16724 8.26391 1.33738 7.85071 1.67765 7.51044C2.01793 7.17016 2.43113 7.00002 2.91724 7.00002C3.15057 7.00002 3.36932 7.04377 3.57349 7.13127C3.77765 7.21877 3.96238 7.3403 4.12765 7.49585L5.86307 6.62085C5.8339 6.39724 5.84606 6.17849 5.89953 5.9646C5.953 5.75071 6.04779 5.55141 6.1839 5.36669L5.68807 4.60835C5.62001 4.6278 5.54953 4.64238 5.47661 4.6521C5.40369 4.66183 5.32835 4.66669 5.25057 4.66669C4.76446 4.66669 4.35126 4.49655 4.01099 4.15627C3.67071 3.81599 3.50057 3.4028 3.50057 2.91669C3.50057 2.43058 3.67071 2.01738 4.01099 1.6771C4.35126 1.33683 4.76446 1.16669 5.25057 1.16669C5.73668 1.16669 6.14988 1.33683 6.49015 1.6771C6.83043 2.01738 7.00057 2.43058 7.00057 2.91669C7.00057 3.11113 6.96897 3.29828 6.90578 3.47815C6.84258 3.65801 6.75751 3.82085 6.65057 3.96669L7.16099 4.72502C7.23876 4.70558 7.31168 4.69099 7.37974 4.68127C7.44779 4.67155 7.52071 4.66669 7.59849 4.66669C7.76376 4.66669 7.91932 4.68613 8.06515 4.72502C8.21099 4.76391 8.35196 4.82224 8.48807 4.90002L9.45057 4.11252C9.41168 4.0153 9.38251 3.91565 9.36307 3.81356C9.34363 3.71148 9.3339 3.60696 9.3339 3.50002C9.3339 3.01391 9.50404 2.60071 9.84432 2.26044C10.1846 1.92016 10.5978 1.75002 11.0839 1.75002C11.57 1.75002 11.9832 1.92016 12.3235 2.26044C12.6638 2.60071 12.8339 3.01391 12.8339 3.50002C12.8339 3.98613 12.6638 4.39933 12.3235 4.7396C11.9832 5.07988 11.57 5.25002 11.0839 5.25002C10.9186 5.25002 10.7631 5.22815 10.6172 5.1844C10.4714 5.14065 10.3304 5.07988 10.1943 5.0021L9.23182 5.80419C9.27071 5.90141 9.29988 6.00106 9.31932 6.10315C9.33876 6.20523 9.34849 6.30974 9.34849 6.41669C9.34849 6.9028 9.17835 7.31599 8.83807 7.65627C8.49779 7.99655 8.0846 8.16669 7.59849 8.16669C7.36515 8.16669 7.14397 8.12294 6.93494 8.03544C6.72592 7.94794 6.53876 7.82641 6.37349 7.67085L4.65265 8.53127C4.6721 8.61877 4.67939 8.70627 4.67453 8.79377C4.66967 8.88127 4.65751 8.96877 4.63807 9.05627L5.86307 9.75627C6.01863 9.62016 6.19119 9.51565 6.38078 9.44273C6.57036 9.36981 6.77696 9.33335 7.00057 9.33335C7.48668 9.33335 7.89988 9.50349 8.24015 9.84377C8.58043 10.184 8.75057 10.5972 8.75057 11.0834C8.75057 11.5695 8.58043 11.9827 8.24015 12.3229C7.89988 12.6632 7.48668 12.8334 7.00057 12.8334ZM2.91724 9.33335C3.08251 9.33335 3.22106 9.27745 3.33286 9.16565C3.44467 9.05384 3.50057 8.9153 3.50057 8.75002C3.50057 8.58474 3.44467 8.4462 3.33286 8.3344C3.22106 8.22259 3.08251 8.16669 2.91724 8.16669C2.75196 8.16669 2.61342 8.22259 2.50161 8.3344C2.38981 8.4462 2.3339 8.58474 2.3339 8.75002C2.3339 8.9153 2.38981 9.05384 2.50161 9.16565C2.61342 9.27745 2.75196 9.33335 2.91724 9.33335ZM5.25057 3.50002C5.41585 3.50002 5.55439 3.44412 5.66619 3.33231C5.778 3.22051 5.8339 3.08196 5.8339 2.91669C5.8339 2.75141 5.778 2.61287 5.66619 2.50106C5.55439 2.38926 5.41585 2.33335 5.25057 2.33335C5.08529 2.33335 4.94675 2.38926 4.83494 2.50106C4.72314 2.61287 4.66724 2.75141 4.66724 2.91669C4.66724 3.08196 4.72314 3.22051 4.83494 3.33231C4.94675 3.44412 5.08529 3.50002 5.25057 3.50002ZM7.00057 11.6667C7.16585 11.6667 7.30439 11.6108 7.41619 11.499C7.528 11.3872 7.5839 11.2486 7.5839 11.0834C7.5839 10.9181 7.528 10.7795 7.41619 10.6677C7.30439 10.5559 7.16585 10.5 7.00057 10.5C6.83529 10.5 6.69675 10.5559 6.58494 10.6677C6.47314 10.7795 6.41724 10.9181 6.41724 11.0834C6.41724 11.2486 6.47314 11.3872 6.58494 11.499C6.69675 11.6108 6.83529 11.6667 7.00057 11.6667ZM7.5839 7.00002C7.74918 7.00002 7.88772 6.94412 7.99953 6.83231C8.11133 6.72051 8.16724 6.58196 8.16724 6.41669C8.16724 6.25141 8.11133 6.11287 7.99953 6.00106C7.88772 5.88926 7.74918 5.83335 7.5839 5.83335C7.41862 5.83335 7.28008 5.88926 7.16828 6.00106C7.05647 6.11287 7.00057 6.25141 7.00057 6.41669C7.00057 6.58196 7.05647 6.72051 7.16828 6.83231C7.28008 6.94412 7.41862 7.00002 7.5839 7.00002ZM11.0839 4.08335C11.2492 4.08335 11.3877 4.02745 11.4995 3.91565C11.6113 3.80384 11.6672 3.6653 11.6672 3.50002C11.6672 3.33474 11.6113 3.1962 11.4995 3.0844C11.3877 2.97259 11.2492 2.91669 11.0839 2.91669C10.9186 2.91669 10.7801 2.97259 10.6683 3.0844C10.5565 3.1962 10.5006 3.33474 10.5006 3.50002C10.5006 3.6653 10.5565 3.80384 10.6683 3.91565C10.7801 4.02745 10.9186 4.08335 11.0839 4.08335Z"
|
||||
fill="#737373"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
Graph
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="list"
|
||||
className={cn(
|
||||
"rounded-full dark:data-[state=active]:bg-[#00173C]! dark:data-[state=active]:border-[#2261CA33]! px-4 py-4",
|
||||
)}
|
||||
>
|
||||
<svg
|
||||
width="10"
|
||||
height="12"
|
||||
viewBox="0 0 10 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>List</title>
|
||||
<path
|
||||
d="M0.00153996 1.78136H0.0032201C0.00332596 1.86499 0.0363955 1.94522 0.095258 2.00463C0.15412 2.06404 0.23403 2.09786 0.31766 2.09874L8.76792 2.09902C8.85189 2.09861 8.93229 2.06485 8.99154 2.00536C9.0508 1.94586 9.08411 1.86533 9.08418 1.78136H9.08558V0.3171C9.08539 0.23296 9.05185 0.152327 8.9923 0.0928833C8.93275 0.0334395 8.85206 3.68622e-05 8.76792 0H0.31766C0.233423 3.71008e-05 0.152646 0.0335166 0.0930814 0.0930814C0.0335167 0.152646 3.71008e-05 0.233423 0 0.31766C0 0.32312 0.00139988 0.3283 0.00167988 0.33376L0.00153996 1.78136ZM8.76778 4.49314H0.31766C0.233423 4.49318 0.152646 4.52666 0.0930814 4.58622C0.0335167 4.64579 3.71008e-05 4.72656 0 4.8108C0 4.81626 0.00139988 4.82144 0.00167988 4.8269V6.2745H0.00336002C0.00346588 6.35813 0.0365354 6.43836 0.0953979 6.49777C0.15426 6.55718 0.234171 6.591 0.3178 6.59188L8.76806 6.59216C8.85203 6.59175 8.93243 6.55799 8.99168 6.4985C9.05094 6.439 9.08425 6.35847 9.08432 6.2745H9.08572V4.81024C9.08553 4.72605 9.05195 4.64538 8.99234 4.58592C8.93273 4.52647 8.85197 4.4931 8.76778 4.49314ZM8.76778 8.98614H0.31766C0.233423 8.98618 0.152646 9.01966 0.0930814 9.07922C0.0335167 9.13879 3.71008e-05 9.21956 0 9.3038C0 9.30926 0.00139988 9.31444 0.00167988 9.3199V10.7675H0.00336002C0.00346588 10.8511 0.0365354 10.9314 0.0953979 10.9908C0.15426 11.0502 0.234171 11.084 0.3178 11.0849L8.76806 11.0852C8.85205 11.0848 8.93247 11.051 8.99173 10.9914C9.051 10.9319 9.08428 10.8514 9.08432 10.7674H9.08572V9.3031C9.0855 9.21894 9.0519 9.1383 8.99229 9.07887C8.93269 9.01945 8.85194 8.9861 8.76778 8.98614Z"
|
||||
fill="#FAFAFA"
|
||||
/>
|
||||
</svg>
|
||||
List
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
<div className="grid grid-cols-2 gap-2 pt-3 overflow-y-auto pr-1">
|
||||
{memoryEntries.map((memory, idx) => {
|
||||
const isClickable =
|
||||
memory.url &&
|
||||
(memory.url.startsWith("http://") ||
|
||||
memory.url.startsWith("https://"))
|
||||
|
||||
const status = memory.isForgotten
|
||||
? "forgotten"
|
||||
: memory.forgetAfter
|
||||
? "expiring"
|
||||
: memory.isStatic
|
||||
? "static"
|
||||
: "latest"
|
||||
|
||||
const content = (
|
||||
<div className="">
|
||||
<div className="bg-[#060D17] p-2 px-[10px] rounded-[10px] m-[2px]">
|
||||
{memory.title && (
|
||||
<div className="text-xs text-[#525D6E] line-clamp-2">
|
||||
{memory.title}
|
||||
</div>
|
||||
)}
|
||||
{memory.memory && (
|
||||
<div className="text-xs text-[#525D6E]/80 line-clamp-2">
|
||||
{memory.memory}
|
||||
</div>
|
||||
)}
|
||||
{memory.url && (
|
||||
<div className="text-xs text-[#525D6E] truncate">
|
||||
{memory.url}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="px-[10px] py-1 flex items-center justify-between">
|
||||
<div
|
||||
className="text-[10px] inline-block bg-clip-text text-transparent font-medium"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
|
||||
backgroundClip: "text",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
}}
|
||||
>
|
||||
v{memory.version}
|
||||
</div>
|
||||
<VersionStatus status={status} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
if (isClickable) {
|
||||
return (
|
||||
<a
|
||||
className="block p-2 bg-[#0C1829]/50 rounded-md border border-[#525D6E]/20 hover:bg-[#0C1829]/70 transition-colors cursor-pointer"
|
||||
href={memory.url}
|
||||
key={memory.id || idx}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{content}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("bg-[#0C1829] rounded-xl")}
|
||||
key={memory.id || idx}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
102
apps/web/components/new/document-modal/index.tsx
Normal file
102
apps/web/components/new/document-modal/index.tsx
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
"use client"
|
||||
|
||||
import { Dialog, DialogContent } from "@repo/ui/components/dialog"
|
||||
import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
|
||||
import { ArrowUpRightIcon, XIcon } from "lucide-react"
|
||||
import type { z } from "zod"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { cn } from "@lib/utils"
|
||||
import { Title } from "./title"
|
||||
import { Summary as DocumentSummary } from "./summary"
|
||||
import { dmSansClassName } from "@/utils/fonts"
|
||||
import { GraphListMemories, type MemoryEntry } from "./graph-list-memories"
|
||||
import { PdfViewer } from "./content/pdf"
|
||||
|
||||
type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
|
||||
type DocumentWithMemories = DocumentsResponse["documents"][0]
|
||||
|
||||
interface DocumentModalProps {
|
||||
document: DocumentWithMemories | null
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function DocumentModal({
|
||||
document: _document,
|
||||
isOpen,
|
||||
onClose,
|
||||
}: DocumentModalProps) {
|
||||
console.log(_document)
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent
|
||||
className={cn(
|
||||
"w-[1158px]! h-[684px]! max-w-none! sm:max-w-none! p-0 border-none bg-[#1B1F24] flex flex-col px-4 pt-3 pb-4 gap-3 rounded-[22px]",
|
||||
dmSansClassName(),
|
||||
)}
|
||||
style={{
|
||||
boxShadow:
|
||||
"0 2.842px 14.211px 0 rgba(0, 0, 0, 0.25), 0.711px 0.711px 0.711px 0 rgba(255, 255, 255, 0.10) inset",
|
||||
}}
|
||||
showCloseButton={false}
|
||||
>
|
||||
<div className="flex justify-between h-fit">
|
||||
<Title
|
||||
title={_document?.title}
|
||||
documentType={_document?.type ?? "text"}
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
{_document?.type === "pdf" && _document.url && (
|
||||
<a
|
||||
href={_document.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="line-clamp-1 px-3 py-2 flex items-center gap-1 bg-[#0D121A] rounded-full shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_1px_2px_rgba(0,0,0,0.1)]"
|
||||
>
|
||||
Visit source
|
||||
<ArrowUpRightIcon className="w-4 h-4 text-[#737373]" />
|
||||
</a>
|
||||
)}
|
||||
<DialogPrimitive.Close
|
||||
className="bg-[#0D121A] w-7 h-7 flex items-center justify-center focus:ring-ring rounded-full transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_1px_2px_rgba(0,0,0,0.1)]"
|
||||
data-slot="dialog-close"
|
||||
>
|
||||
<XIcon stroke="#737373" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 grid grid-cols-[2fr_1fr] gap-3 overflow-hidden">
|
||||
<div
|
||||
id="document-preview"
|
||||
className={cn(
|
||||
"bg-[#14161A] rounded-[14px] overflow-hidden flex flex-col shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_1px_2px_rgba(0,0,0,0.1)]",
|
||||
)}
|
||||
>
|
||||
{_document?.type === "text" && (
|
||||
<div className="p-4">{_document.content}</div>
|
||||
)}
|
||||
{_document?.type === "pdf" && <PdfViewer url={_document.url} />}
|
||||
</div>
|
||||
<div
|
||||
id="document-memories-summary"
|
||||
className={cn("gap-3 flex flex-col", dmSansClassName())}
|
||||
>
|
||||
{_document?.summary && (
|
||||
<DocumentSummary
|
||||
memoryEntries={_document.memoryEntries}
|
||||
summary={_document.summary}
|
||||
createdAt={_document.createdAt}
|
||||
/>
|
||||
)}
|
||||
{_document?.memoryEntries && _document.memoryEntries.length > 0 && (
|
||||
<GraphListMemories
|
||||
memoryEntries={_document.memoryEntries as MemoryEntry[]}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
84
apps/web/components/new/document-modal/summary.tsx
Normal file
84
apps/web/components/new/document-modal/summary.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import { cn } from "@lib/utils"
|
||||
import { SyncLogoIcon } from "@ui/assets/icons"
|
||||
|
||||
function CalendarIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Calendar Icon</title>
|
||||
<path
|
||||
d="M1.33333 13.3333C0.966667 13.3333 0.652778 13.2028 0.391667 12.9417C0.130556 12.6806 0 12.3667 0 12V2.66667C0 2.3 0.130556 1.98611 0.391667 1.725C0.652778 1.46389 0.966667 1.33333 1.33333 1.33333H2V0H3.33333V1.33333H8.66667V0H10V1.33333H10.6667C11.0333 1.33333 11.3472 1.46389 11.6083 1.725C11.8694 1.98611 12 2.3 12 2.66667V6H10.6667V5.33333H1.33333V12H6V13.3333H1.33333ZM1.33333 4H10.6667V2.66667H1.33333V4ZM7.33333 13.3333V11.2833L11.0167 7.61667C11.1167 7.51667 11.2278 7.44444 11.35 7.4C11.4722 7.35556 11.5944 7.33333 11.7167 7.33333C11.85 7.33333 11.9778 7.35833 12.1 7.40833C12.2222 7.45833 12.3333 7.53333 12.4333 7.63333L13.05 8.25C13.1389 8.35 13.2083 8.46111 13.2583 8.58333C13.3083 8.70555 13.3333 8.82778 13.3333 8.95C13.3333 9.07222 13.3111 9.19722 13.2667 9.325C13.2222 9.45278 13.15 9.56667 13.05 9.66667L9.38333 13.3333H7.33333ZM8.33333 12.3333H8.96667L10.9833 10.3L10.6833 9.98333L10.3667 9.68333L8.33333 11.7V12.3333ZM10.6833 9.98333L10.3667 9.68333L10.9833 10.3L10.6833 9.98333Z"
|
||||
fill="#737373"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function Summary({
|
||||
memoryEntries,
|
||||
summary,
|
||||
createdAt,
|
||||
}: {
|
||||
memoryEntries: any[]
|
||||
summary: string
|
||||
createdAt: Date
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
id="document-summary"
|
||||
className="bg-[#14161A] py-3 px-4 rounded-[14px] space-y-4 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_1px_2px_rgba(0,0,0,0.1)]"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[16px] font-semibold text-[#FAFAFA] line-clamp-1 leading-[125%]">
|
||||
Summary
|
||||
</p>
|
||||
<div className="text-[#737373] text-[10px] leading-[150%]">
|
||||
powered by supermemory
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[14px] text-[#FAFAFA] leading-[1.4] max-h-[117.6px] overflow-y-auto scrollbar-thin">
|
||||
{summary}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center",
|
||||
memoryEntries.length > 0 ? "justify-between" : "justify-end",
|
||||
)}
|
||||
>
|
||||
{memoryEntries.length > 0 && (
|
||||
<p
|
||||
className={cn(
|
||||
"text-[#369BFD] line-clamp-1 flex items-center gap-1.5",
|
||||
)}
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
|
||||
backgroundClip: "text",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
}}
|
||||
>
|
||||
<SyncLogoIcon className="w-[17.1px] h-[13.87px]" />
|
||||
{memoryEntries.length}{" "}
|
||||
{memoryEntries.length === 1 ? "memory" : "memories"}
|
||||
</p>
|
||||
)}
|
||||
<p
|
||||
className={cn("text-[#737373] line-clamp-1 flex items-center gap-1")}
|
||||
>
|
||||
<CalendarIcon />
|
||||
{new Date(createdAt).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
48
apps/web/components/new/document-modal/title.tsx
Normal file
48
apps/web/components/new/document-modal/title.tsx
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
import { cn } from "@lib/utils"
|
||||
import { dmSansClassName } from "@/utils/fonts"
|
||||
import type { DocumentTypeEnum } from "@repo/validation/schemas"
|
||||
import type { z } from "zod"
|
||||
import { getDocumentIcon } from "@/components/new/document-modal/document-icon"
|
||||
|
||||
type DocumentType = z.infer<typeof DocumentTypeEnum>
|
||||
|
||||
function getFileExtension(documentType: DocumentType): string | null {
|
||||
switch (documentType) {
|
||||
case "pdf":
|
||||
return ".pdf"
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export function Title({
|
||||
title,
|
||||
documentType,
|
||||
}: {
|
||||
title: string | null | undefined
|
||||
documentType: DocumentType
|
||||
}) {
|
||||
const extension = getFileExtension(documentType)
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
dmSansClassName(),
|
||||
"text-[16px] font-semibold text-[#FAFAFA] line-clamp-1 leading-[125%] flex items-center gap-3",
|
||||
)}
|
||||
>
|
||||
<div className="pl-1 flex items-center gap-1">
|
||||
{getDocumentIcon(documentType as DocumentType, "w-4 h-4 flex-shrink-0")}
|
||||
{extension && (
|
||||
<p
|
||||
className={cn(dmSansClassName(), "text-[12px] font-semibold")}
|
||||
style={{ color: "#FF7673" }}
|
||||
>
|
||||
{extension}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{title || "Untitled Document"}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ import { useAuth } from "@lib/auth-context"
|
|||
import { $fetch } from "@repo/lib/api"
|
||||
import type { DocumentsWithMemoriesResponseSchema } from "@repo/validation/api"
|
||||
import { useInfiniteQuery } from "@tanstack/react-query"
|
||||
import { useCallback, memo, useMemo } from "react"
|
||||
import { useCallback, memo, useMemo, useState, useRef } from "react"
|
||||
import type { z } from "zod"
|
||||
import { Masonry, useInfiniteLoader } from "masonic"
|
||||
import { dmSansClassName } from "@/utils/fonts"
|
||||
|
|
@ -23,6 +23,7 @@ import { YoutubePreview } from "./document-cards/youtube-preview"
|
|||
import { getAbsoluteUrl, isYouTubeUrl, useYouTubeChannelName } from "./utils"
|
||||
import { SyncLogoIcon } from "@ui/assets/icons"
|
||||
import { McpPreview } from "./document-cards/mcp-preview"
|
||||
import { DocumentModal } from "./document-modal"
|
||||
|
||||
type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
|
||||
type DocumentWithMemories = DocumentsResponse["documents"][0]
|
||||
|
|
@ -35,6 +36,9 @@ export function MemoriesGrid() {
|
|||
const { user } = useAuth()
|
||||
const { selectedProject } = useProject()
|
||||
const isMobile = useIsMobile()
|
||||
const [selectedDocument, setSelectedDocument] =
|
||||
useState<DocumentWithMemories | null>(null)
|
||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||
|
||||
const {
|
||||
data,
|
||||
|
|
@ -111,6 +115,11 @@ export function MemoriesGrid() {
|
|||
},
|
||||
)
|
||||
|
||||
const handleCardClick = useCallback((document: DocumentWithMemories) => {
|
||||
setSelectedDocument(document)
|
||||
setIsModalOpen(true)
|
||||
}, [])
|
||||
|
||||
const renderDocumentCard = useCallback(
|
||||
({
|
||||
index,
|
||||
|
|
@ -120,8 +129,15 @@ export function MemoriesGrid() {
|
|||
index: number
|
||||
data: DocumentWithMemories
|
||||
width: number
|
||||
}) => <DocumentCard index={index} data={data} width={width} />,
|
||||
[],
|
||||
}) => (
|
||||
<DocumentCard
|
||||
index={index}
|
||||
data={data}
|
||||
width={width}
|
||||
onClick={handleCardClick}
|
||||
/>
|
||||
),
|
||||
[handleCardClick],
|
||||
)
|
||||
|
||||
if (!user) {
|
||||
|
|
@ -167,8 +183,8 @@ export function MemoriesGrid() {
|
|||
key={`masonry-${documents.length}-${documents.map((d) => d.id).join(",")}`}
|
||||
items={documents}
|
||||
render={renderDocumentCard}
|
||||
columnGutter={16}
|
||||
rowGutter={16}
|
||||
columnGutter={0}
|
||||
rowGutter={0}
|
||||
columnWidth={216}
|
||||
maxColumnCount={isMobile ? 1 : undefined}
|
||||
itemHeightEstimate={200}
|
||||
|
|
@ -183,6 +199,11 @@ export function MemoriesGrid() {
|
|||
)}
|
||||
</div>
|
||||
)}
|
||||
<DocumentModal
|
||||
document={selectedDocument}
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -223,91 +244,128 @@ const DocumentCard = memo(
|
|||
index: _index,
|
||||
data: document,
|
||||
width,
|
||||
onClick,
|
||||
}: {
|
||||
index: number
|
||||
data: DocumentWithMemories
|
||||
width: number
|
||||
onClick: (document: DocumentWithMemories) => void
|
||||
}) => {
|
||||
const [rotation, setRotation] = useState({ rotateX: 0, rotateY: 0 })
|
||||
const cardRef = useRef<HTMLButtonElement>(null)
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
if (!cardRef.current) return
|
||||
|
||||
const rect = cardRef.current.getBoundingClientRect()
|
||||
const centerX = rect.left + rect.width / 2
|
||||
const centerY = rect.top + rect.height / 2
|
||||
|
||||
const mouseX = e.clientX - centerX
|
||||
const mouseY = e.clientY - centerY
|
||||
|
||||
// Calculate rotation angles (max 15 degrees)
|
||||
const rotateY = (mouseX / (rect.width / 2)) * 15
|
||||
const rotateX = -(mouseY / (rect.height / 2)) * 15
|
||||
|
||||
setRotation({ rotateX, rotateY })
|
||||
}
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
setRotation({ rotateX: 0, rotateY: 0 })
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-[22px] bg-[#1B1F24] px-1 space-y-2 pt-1",
|
||||
document.type === "image" ||
|
||||
<div className="p-2" style={{ width }}>
|
||||
<button
|
||||
ref={cardRef}
|
||||
type="button"
|
||||
className={cn(
|
||||
"rounded-[22px] bg-[#1B1F24] px-1 space-y-2 pt-1 cursor-pointer w-full",
|
||||
"border-none text-left transition-transform duration-200 ease-out",
|
||||
document.type === "image" ||
|
||||
document.metadata?.mimeType?.toString().startsWith("image/")
|
||||
? "pb-1"
|
||||
: "",
|
||||
)}
|
||||
onClick={() => onClick(document)}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
style={{
|
||||
boxShadow:
|
||||
"0 2.842px 14.211px 0 rgba(0, 0, 0, 0.25), 0.711px 0.711px 0.711px 0 rgba(255, 255, 255, 0.10) inset",
|
||||
transform: `perspective(1000px) rotateX(${rotation.rotateX}deg) rotateY(${rotation.rotateY}deg)`,
|
||||
transformStyle: "preserve-3d",
|
||||
}}
|
||||
>
|
||||
<ContentPreview document={document} />
|
||||
{!(
|
||||
document.type === "image" ||
|
||||
document.metadata?.mimeType?.toString().startsWith("image/")
|
||||
? "pb-1"
|
||||
: "",
|
||||
)}
|
||||
style={{
|
||||
width,
|
||||
boxShadow:
|
||||
"0 2.842px 14.211px 0 rgba(0, 0, 0, 0.25), 0.711px 0.711px 0.711px 0 rgba(255, 255, 255, 0.10) inset",
|
||||
}}
|
||||
>
|
||||
<ContentPreview document={document} />
|
||||
{!(
|
||||
document.type === "image" ||
|
||||
document.metadata?.mimeType?.toString().startsWith("image/")
|
||||
) && (
|
||||
<div className="pb-[10px] space-y-1">
|
||||
{document.url &&
|
||||
!document.url.includes("x.com") &&
|
||||
!document.url.includes("twitter.com") &&
|
||||
!document.url.includes("files.supermemory.ai") && (
|
||||
<div className="px-3">
|
||||
) && (
|
||||
<div className="pb-[10px] space-y-1">
|
||||
{document.url &&
|
||||
!document.url.includes("x.com") &&
|
||||
!document.url.includes("twitter.com") &&
|
||||
!document.url.includes("files.supermemory.ai") && (
|
||||
<div className="px-3">
|
||||
<p
|
||||
className={cn(
|
||||
dmSansClassName(),
|
||||
"text-[12px] text-[#E5E5E5] line-clamp-1 font-semibold",
|
||||
)}
|
||||
>
|
||||
{document.title}
|
||||
</p>
|
||||
|
||||
<DocumentUrlDisplay url={document.url} />
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center px-3",
|
||||
document.memoryEntries.length > 0
|
||||
? "justify-between"
|
||||
: "justify-end",
|
||||
)}
|
||||
>
|
||||
{document.memoryEntries.length > 0 && (
|
||||
<p
|
||||
className={cn(
|
||||
dmSansClassName(),
|
||||
"text-[12px] text-[#E5E5E5] line-clamp-1 font-semibold",
|
||||
"text-[10px] text-[#369BFD] line-clamp-1 font-semibold flex items-center gap-1",
|
||||
)}
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
|
||||
backgroundClip: "text",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
}}
|
||||
>
|
||||
{document.title}
|
||||
<SyncLogoIcon className="w-[12.33px] h-[10px]" />
|
||||
{document.memoryEntries.length}{" "}
|
||||
{document.memoryEntries.length === 1
|
||||
? "memory"
|
||||
: "memories"}
|
||||
</p>
|
||||
|
||||
<DocumentUrlDisplay url={document.url} />
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center px-3",
|
||||
document.memoryEntries.length > 0
|
||||
? "justify-between"
|
||||
: "justify-end",
|
||||
)}
|
||||
>
|
||||
{document.memoryEntries.length > 0 && (
|
||||
)}
|
||||
<p
|
||||
className={cn(
|
||||
dmSansClassName(),
|
||||
"text-[10px] text-[#369BFD] line-clamp-1 font-semibold flex items-center gap-1",
|
||||
"text-[10px] text-[#737373] line-clamp-1",
|
||||
)}
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
|
||||
backgroundClip: "text",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
}}
|
||||
>
|
||||
<SyncLogoIcon className="w-[12.33px] h-[10px]" />
|
||||
{document.memoryEntries.length}{" "}
|
||||
{document.memoryEntries.length === 1 ? "memory" : "memories"}
|
||||
{new Date(document.createdAt).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
<p
|
||||
className={cn(
|
||||
dmSansClassName(),
|
||||
"text-[10px] text-[#737373] line-clamp-1",
|
||||
)}
|
||||
>
|
||||
{new Date(document.createdAt).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,119 +0,0 @@
|
|||
import { MCPIcon } from "@/components/menu"
|
||||
import { colors } from "@repo/ui/memory-graph/constants"
|
||||
import {
|
||||
GoogleDocs,
|
||||
MicrosoftWord,
|
||||
NotionDoc,
|
||||
GoogleDrive,
|
||||
GoogleSheets,
|
||||
GoogleSlides,
|
||||
PDF,
|
||||
OneDrive,
|
||||
MicrosoftOneNote,
|
||||
MicrosoftPowerpoint,
|
||||
MicrosoftExcel,
|
||||
} from "@ui/assets/icons"
|
||||
import { FileText, Globe } from "lucide-react"
|
||||
import { useState } from "react"
|
||||
|
||||
const getFaviconUrl = (url: string): string => {
|
||||
try {
|
||||
const domain = new URL(url).hostname
|
||||
return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`
|
||||
} catch {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
|
||||
const FaviconIcon = ({
|
||||
url,
|
||||
className,
|
||||
iconProps,
|
||||
}: {
|
||||
url: string
|
||||
className: string
|
||||
iconProps: { className: string; style: { color: string } }
|
||||
}) => {
|
||||
const [hasError, setHasError] = useState(false)
|
||||
const faviconUrl = getFaviconUrl(url)
|
||||
|
||||
if (hasError || !faviconUrl) {
|
||||
return <Globe {...iconProps} />
|
||||
}
|
||||
|
||||
return (
|
||||
<img
|
||||
src={faviconUrl}
|
||||
alt="Website favicon"
|
||||
className={className}
|
||||
style={{
|
||||
width: "2em",
|
||||
height: "2em",
|
||||
objectFit: "contain",
|
||||
}}
|
||||
onError={() => setHasError(true)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export const getDocumentIcon = (
|
||||
type: string,
|
||||
className: string,
|
||||
source?: string,
|
||||
url?: string,
|
||||
) => {
|
||||
const iconProps = {
|
||||
className,
|
||||
style: { color: colors.text.muted },
|
||||
}
|
||||
|
||||
if (source === "mcp") {
|
||||
return <MCPIcon {...iconProps} />
|
||||
}
|
||||
|
||||
if (
|
||||
type === "webpage" ||
|
||||
type === "url" ||
|
||||
(url && (type === "unknown" || !type))
|
||||
) {
|
||||
if (url) {
|
||||
return (
|
||||
<FaviconIcon url={url} className={className} iconProps={iconProps} />
|
||||
)
|
||||
}
|
||||
|
||||
return <Globe {...iconProps} />
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case "google_doc":
|
||||
return <GoogleDocs {...iconProps} />
|
||||
case "google_sheet":
|
||||
return <GoogleSheets {...iconProps} />
|
||||
case "google_slide":
|
||||
return <GoogleSlides {...iconProps} />
|
||||
case "google_drive":
|
||||
return <GoogleDrive {...iconProps} />
|
||||
case "notion":
|
||||
case "notion_doc":
|
||||
return <NotionDoc {...iconProps} />
|
||||
case "word":
|
||||
case "microsoft_word":
|
||||
return <MicrosoftWord {...iconProps} />
|
||||
case "excel":
|
||||
case "microsoft_excel":
|
||||
return <MicrosoftExcel {...iconProps} />
|
||||
case "powerpoint":
|
||||
case "microsoft_powerpoint":
|
||||
return <MicrosoftPowerpoint {...iconProps} />
|
||||
case "onenote":
|
||||
case "microsoft_onenote":
|
||||
return <MicrosoftOneNote {...iconProps} />
|
||||
case "onedrive":
|
||||
return <OneDrive {...iconProps} />
|
||||
case "pdf":
|
||||
return <PDF {...iconProps} />
|
||||
default:
|
||||
return <FileText {...iconProps} />
|
||||
}
|
||||
}
|
||||
|
|
@ -68,11 +68,13 @@
|
|||
"next": "16.0.9",
|
||||
"next-themes": "^0.4.6",
|
||||
"nuqs": "^2.5.2",
|
||||
"pdfjs-dist": "5.4.296",
|
||||
"posthog-js": "^1.257.0",
|
||||
"random-word-slugs": "^0.1.7",
|
||||
"react": "19.2.2",
|
||||
"react-dom": "19.2.2",
|
||||
"react-dropzone": "^14.3.8",
|
||||
"react-pdf": "^10.2.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-tweet": "^3.2.2",
|
||||
"recharts": "2",
|
||||
|
|
|
|||
2126
apps/web/public/dot-pattern.svg
Normal file
2126
apps/web/public/dot-pattern.svg
Normal file
File diff suppressed because it is too large
Load diff
|
After Width: | Height: | Size: 100 KiB |
|
|
@ -261,6 +261,7 @@ export const MemoryEntrySchema = z.object({
|
|||
// Status flags
|
||||
isInference: z.boolean().default(false),
|
||||
isForgotten: z.boolean().default(false),
|
||||
isStatic: z.boolean().default(false),
|
||||
forgetAfter: z.coerce.date().nullable().optional(),
|
||||
forgetReason: z.string().nullable().optional(),
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue